媒体查询在 iOS 版 Chrome 中无法正常工作

Posted 2023-03-06

【中文标题】媒体查询在 iOS 版 Chrome 中无法正常工作

【英文标题】：Media Queries not working properly in Chrome for iOS

【发布时间】：2012-08-03 19:58:07

【问题描述】：

我一直在开发一个移动优先的网站，但发现我的。似乎无论我使用什么尺寸的设备（iPhone、iPad）和查看它的方向，页面都显示了基线（移动）样式和“481px 以上”样式的混合版本。我上传了一小部分截图（带有描述）来说明这个问题。

http://imgur.com/a/6Ee7C

您可以在http://dev.thesmackpack.com 看到该页面。 CSS 是未缩小的，以防您可以通过在其中四处寻找任何东西来学习。媒体查询在我测试过的所有其他浏览器中都能正常工作，只有 Chrome for ios 给我这些问题。

编辑：它似乎在我发现要测试的其他一些设备上运行良好。但我无法在我的 iPhone 和 iPad 上实现 UN-break，而这些设备是我开发网站的设备，所以问题仍然存在。

【参考方案1】：

尝试用分号分隔您的视口元数据

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

如果失败，您可能需要限制缩放

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

【讨论】：

不幸的是，这似乎没有帮助。但我以后会把视口元数据分开，以防万一……

除此之外，我不确定为什么从可用性的角度来看（我在很多代码中看到 maximum-scale=1）限制页面缩放是“可以接受的”。有很多人需要放大事物才能正确看到它们。

我认为它存在的主要原因是阻止用户缩小移动网站。完全同意整个可用性的事情。

在遇到同样的问题（媒体查询不起作用）后，将device-width 后面的逗号切换为分号即可解决问题。

根据一些额外的研究，正确的语法是逗号，而不是分号。看到这个帖子：***.com/questions/19250910/…

【参考方案2】：

不确定这是否有帮助，但我发现我的样式表在 Chrome iOS 中出现了一半问题（但在我尝试过的所有其他浏览器和设备上都可以正常工作，包括媒体查询），直到我在我的 head 标签中创建了样式表链接url - “http://www.directory/style.css”，而不仅仅是相对文件路径（“/style.css”，或其他）。

【讨论】：

感谢您的建议。如果我再次遇到这种情况，我会试一试。

【参考方案3】：

不幸的是，这个问题似乎已经神奇地自行解决了。我认为这可能与 Chrome 的“请求桌面站点”功能有关，但我并不肯定。希望我对未来遇到问题的人有更好的建议。

【参考方案4】：

我遇到了类似的问题。 @Nick Simpson-Deeks 回答对我有用（样式表的完整 URL 路径）。还可以将媒体查询放在单独的样式表中。

【参考方案5】：

问题不在于单独文件中的@media css。移动 chrome 缓存就像疯了一样，它看起来像你通过将它移动到不同的工作表来修复它的原因是因为 chrome 认为它是新的并且还没有缓存它。

【参考方案6】：

看起来 chrome 只是不会放开它的缓存。我尝试删除缓存、历史记录等。没有影响。重新安装应用程序并加载所有正确的样式。看起来他们有一些错误要修复。

【讨论】：

我们在重新设计的新网站上遇到了 CSS 问题。经过多次故障排除和多次尝试清除多部手机（iOS + Chrome）上的缓存。在手机上卸载并重新安装 Chrome 解决了该问题。 iOS 8.13、Chrome 40.0.2214.69

【参考方案7】：

确保您没有复制粘贴太多@media 字词，例如

@media screen and (max-width: 1200px), @media screen and (max-device-width: 1200px), @media screen and (max-height: 720px), @media screen and (max-device-height: 720px)
  ...

开头应该只有一个@media！这是很常见的错误。

【参考方案8】：

首先！ 确保您的浏览器在没有任何缩放的情况下以 100% 的比例显示页面。 如果它被缩放，它将弄乱所有媒体查询计算:)