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

【问题标题】：media query doesn't work on devices媒体查询在设备上不起作用
【发布时间】：2013-02-22 17:42:18
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

如果您使用的 iPhone 不是原装 iPhone，则宽度为 640 像素。如今，大多数 Android 手机都在附近，甚至更多。因此，您的 max-width: 600px 查询范围太窄，无法应用于任何这些手机。

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

【讨论】：

对不起，不是这样。用 767px 试了一下。在 Galaxy II 和 iPhone 上测试。结果相同
我这里都有：grmmphmedia.blogspot.fi 当我为 iPhone 指定它时它可以工作@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) { }
@grmmph 仍然不适合我，您的链接不允许我们进入。