对移动设备的响应能力感到沮丧

Question

我相信你们中的许多人以前都面临过。 我完成了网站的开发。 在开发过程中，我使用了媒体查询和Firefox响应式设计视图。 我进行了一项研究，以了解最常见的屏幕分辨率，然后添加了这些分辨率。 在Chrome和Opera调整浏览器大小时也进行了测试。

今天，当我在移动设备（Moto G）上进行测试时，我的网站似乎没有响应。 他们的布局没有改变。 我要做的另一件事是使用启用设备工具栏的Chrome开发者工具。 令我惊讶的是，任何选定的设备都改变了我的布局。

在媒体查询中，我使用宽度min-width和max-width进行调整。 在SO上阅读，我看到最能说明问题的是使用设备宽度而不是宽度。

因此，我是否需要更改所有媒体查询以在移动设备上查看结果？ 我是否在计算机上失去了屏幕分辨率？

Answer 1

也许您没有将文件上传到Web服务器？ 或者，如果您正在使用预处理器和应用程序，也许它没有转换您的代码？ 这些只是我的想法，没什么严肃的。

我正在此媒体查询中屏幕上使用：

@media screen and (max-width: 1199px) and (min-width: 992px)

它非常适合我，对于移动屏幕，我什至没有指定最小宽度。

无论如何，谢谢，我需要粘贴到jsFiddle的代码来帮助您。

Answer 2

经过另一项研究，我发现我忘记了元标记视口：

<meta name="viewport" content="width=device-width, initial-scale=1">

添加即可解决问题。