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

Question

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

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

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

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

Answer 1

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

我正在将此媒体查询用于中等屏幕：

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

它对我来说很完美，而对于移动屏幕，我什至没有指定最小宽度。

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

Answer 2

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

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

添加即可解决问题。