iOS Webkit忽略媒体查询

Question

我正在使用移动优先开发方法在一个网站(villa-antonia)上工作.也就是说,我首先使用CSS for mobile,然后使用媒体查询添加/覆盖样式以获得更高分辨率.问题是,在iPhone中,背景图像正在加载到所有内容之上,尽管它是在更高分辨率的媒体查询中.

这是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模拟器上测试的所有其他设备)也是如此.

Answer 1

默认情况下,iOS浏览器提供一组默认屏幕尺寸,无论实际的屏幕分辨率或方向如何.

为了让他们提供实际的屏幕尺寸,他们会遵守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