Question

我一直在开发移动优先网站，并且发现我的媒体查询在Chrome for iOS中无法正常运行。似乎无论我使用什么尺寸的设备（iPhone，iPad）以及我查看它的方向，该页面都显示了基线（移动）样式和“481px以上”样式的混合版本。我上传了一个小屏幕截图（包含说明）来说明这个问题。

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

您可以在http://dev.thesmackpack.com看到该页面。如果有任何你可以通过在那里探索可以学习的东西，CSS是不明确的。媒体查询在我测试过的所有其他浏览器中都能正常运行，只有Chrome for iOS给我这些问题。

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

Answer 1

它确实看起来像Chrome不会放开它的缓存。我尝试删除缓存，历史记录等没有影响。重新安装应用程序和加载的所有正确样式。看起来他们有一些错误需要解决。

Answer 2

尝试使用分号

分隔视口元素

<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;">

Answer 3

不幸的是，这个问题似乎已经神奇地解决了。我认为它可能与Chrome的“请求桌面网站”功能有某种关系，但我并不积极。希望我对未来的问题有更好的建议。

Answer 4

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

Answer 5

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

Answer 6

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

Answer 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！这是一个非常常见的错误。

Answer 8

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

媒体查询在Chrome for iOS中无法正常运行

8 个答案: