媒体查询在设备上不起作用

Question

我正在尝试将媒体查询应用于博主模板。

@media all and (max-width: 600px)
  { 
     //styling here
  }

当我调整窗口大小时，这在桌面浏览器上运行正常。但是，当我在移动设备（Android，iPhone）上测试它时它不起作用并显示桌面版本。 我查看了this文章，但没有任何帮助。

Answer 1

您是否在viewport中指定了html。您需要这样才能渲染样式。

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

您可以在此处阅读：https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Answer 2

如果您使用的是原版以外的任何iPhone，则宽度为640px。如今，大多数Android手机都在那里，如果不是更多的话。因此，您的max-width: 600px查询太窄，无法应用于任何这些手机。

您可以通过增加max-width参数来解决此问题，以便在包含手机时仍然排除桌面。使用Twitter Bootstrap的移动设备宽度，您应该尝试max-width: 767px。

Answer 3

在这个时间点似乎你提到的代码并不存在，并且隐藏了y轴。如果有，那么只有1.你需要有更多的媒体查询以获得更小的宽度。查看我的blogspot site（它是一个自定义域，因此它没有.blogspot），它有许多媒体查询，宽度小得多，宽度不同。

为媒体查询中的各种元素设置max-width和max-height以获得更小的宽度，您肯定会看到它正常工作。

只是提示：要进行测试，您需要不在Android / ios中打开您的网站，只需调整桌面上的窗口大小，或者您site。