iOS Webkit忽略媒体查询

我正在使用移动优先开发方法在一个网站（ villa-antonia ）上工作。 也就是说，我的CSS首先是移动的，然后添加/覆盖样式与媒体查询更高的分辨率。 事实是，在iPhone中，背景图像加载在所有东西之上，尽pipe在媒体查询中有更高的分辨率。

这是CSS文件（我认为涉及的部分）的一部分：

body { background: #c70000; overflow: auto; -webkit-overflow-scrolling: touch; } /* Minimum width of 960 pixels. */ @media only screen and (min-width: 960px) { body { background: transparent url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } } 

在我的CSS的理解，iPhone甚至不应该加载bg.jpg图像，因为是在媒体查询。 但是，当我向下滚动时，这就是我所得到的：

你看到的车是bg.jpg的一部分，我向下滚动显示在屏幕上的bg.jpg越多。

我真的不知道为什么加载图像…任何想法？

PS：在iPad和iPhone 4（以及可以在iOS模拟器上testing的所有其他设备）中也是如此。

Answer 1

默认情况下，iOS浏览器提供一组默认的屏幕尺寸，而不pipe实际的屏幕尺寸或方向 。

为了让他们提供实际的屏幕尺寸，他们会服从一个Meta标签：

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

如果您将其添加到您的页面，那么您的@media命令应该与每个设备的实际屏幕值一起工作。

我发现这些链接很有用：

• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• http://www.quirksmode.org/mobile/viewports2.html

Answer 2

好。 正如我以为解决scheme很简单，并没有任何关于CSS媒体查询>。<

这是很久以前，因为我编写了网站的第一个原型，我不记得我正在通过JavaScript语句加载bg.jpg图像，使用任何伸展作为backgroun-size：cover;的后备。

谢谢大家的回答和时间。