4

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

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

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

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

4

8 回答 8

5

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

于 2013-02-01T21:33:30.000 回答
4

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

<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;">
于 2012-08-06T20:20:26.357 回答
2

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

于 2012-09-17T14:27:16.040 回答
0

确保您没有复制粘贴太多@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！这是很常见的错误。

于 2013-04-16T18:14:13.827 回答
0

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

于 2012-09-16T06:14:52.783 回答
0

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

于 2013-01-24T01:10:01.633 回答
0

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

于 2013-02-01T00:29:23.010 回答
0

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

于 2014-09-24T19:03:21.957 回答