媒体查询不适用于 Android 和 iPhone答案

【问题标题】：Media queries don't work on Android and iPhone媒体查询不适用于 Android 和 iPhone
【发布时间】：2013-06-21 07:32:57
【问题描述】：

我正在努力让网站在智能手机和平板电脑上具有响应性并且看起来不错。

问题是我的移动设备看不到我专门为它们编写的媒体查询。我知道这个问题在 Stackoverflow 上经常被问到，但我没有找到任何解决这个问题的方法。这是我的代码：

@media only screen and (max-width: 768px) {
    /* Some mobile-specific code goes here */
}

我尝试使用max-device-width并添加了

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

到该部分但没有成功:(

您能帮我解决这个问题吗？我真的坚持下去了，需要你的帮助。

提前谢谢你！

【问题讨论】：

【解决方案1】：

我没有在页面顶部看到视口元标记——我错过了什么吗？

【讨论】：

谢谢大卫。很奇怪...我可以在开发人员工具中看到但它不存在于源代码中...也许这是因为我正在使用 JS 添加？如果是这样，你能告诉我如何修复它吗？我无法访问整个页面，只能访问头部底部附加的 2 个文件：lifevision.css 和 lifevision.js。谢谢！
通过开发者工具，viewport标签的行号是多少？也许我需要换咖啡:)
:) 就在之后。请看截图：mediafire.com/view/wlmq2qmpw7xwpbi/fineart-dev-tools.jpg
它是用JS添加的。大卫，你能告诉我你是否在页面底部看到了 2 个附加文件：lifevision.js 和 lifevision.css？我只是注意到我可以在 Chrome 上看到它们，但在 Firefox 上看不到 :( 这很奇怪……我快疯了……
对不起，我似乎需要在网站地址中添加一些特殊参数才能加载此脚本。 Arghhh ... :) 谢谢大家的帮助，尤其是大卫！ ;)

【解决方案2】：

我会推荐使用这个元标记：

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

设置“maximum-scale=1”会阻止用户滚动，这通常被视为可访问性问题。让用户在需要时进行缩放。

至于媒体查询，我查看了您的 CSS，但实际上并没有看到任何媒体查询。您确定加载了这些查询的 CSS 文件吗？

【讨论】：

感谢您的建议，我会尝试一下。媒体查询显示在页面底部的“lifevision.css”文件中。我尝试使用 max-device-width 而不是 max-width 但浏览器和智能手机都忽略了此规则。所以我又回到了最大宽度。