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

Question

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

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

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

Answer 1

您是否viewport在html.You 中指定 。您将需要这个才能渲染样式。

<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，则宽度为 640 像素。如今，大多数 Android 手机都在附近，甚至更多。因此，您的max-width: 600px查询范围太窄，无法应用于任何这些手机。

您可以通过增加max-width参数来纠正此问题，以在包括手机的同时仍排除桌面。将 Twitter Bootstrap 的宽度用于移动设备，您应该尝试max-width: 767px.

Answer 3

似乎此时您提到的代码不存在，并且隐藏了 y 轴。如果确实存在，那么只有 1 个。您需要针对较小的宽度进行更多媒体查询。请参阅我的blogspot 站点（它是一个自定义域，所以它没有 .blogspot），它有许多媒体查询，它们的宽度要小得多。

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

提示：要进行测试，您无需在android/ios 中打开您的网站，只需调整您桌面上的窗口或您这个网站的大小。