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图像，因为它在媒体查询中。但这是我向下滚动时得到的结果：

villa-antonia seen from an iPhone 5

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

我真的不知道为什么要加载图片...任何想法？

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

Answer 1

默认情况下，iOS浏览器提供一组默认屏幕尺寸，无论实际屏幕res 还是方向。

为了让他们提供实际的屏幕尺寸，他们会遵守Meta标签：

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

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

我发现这些链接很有用：

Answer 2

确定。我认为解决方案很简单，与CSS媒体查询无关＆gt;。＆lt;

很久以前，因为我编写了网站的第一个原型，我不记得我正在使用anystretch作为背景大小的后备来加载bg.jpg图像通过javascript语句：cover;。< / p>

谢谢大家的答案和时间。

iOS Webkit忽略媒体查询

2 个答案:

我发现这些链接很有用：