iOS Webkit 忽略媒体查询答案

【问题标题】：iOS Webkit ignoring media queriesiOS Webkit 忽略媒体查询
【发布时间】：2013-04-06 05:32:06
【问题描述】：

我正在使用移动优先开发方法开发一个网站 (villa-antonia)。也就是说，我首先为移动设备添加 CSS，然后使用媒体查询添加/覆盖样式以获得更高分辨率。问题是，在 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 模拟器上测试的设备）。

【问题讨论】：

不知道这是否重要，但 iPhone 4 的分辨率为 640×960，因此在横向您的媒体查询将适用（我知道屏幕截图是纵向的，这只是一个提示）。
这只发生在 iOS4 中吗？如果是这样，它可以很容易地修复，我不明白为什么它会在旧的 iOS 设备上出现这种情况
@Linus_Caldwell 我的试训只在纵向，这就是为什么在我的代码中我没有考虑横向。首先我想解决这种情况，然后我会尝试景观。不过谢谢你的提示。
@andres-ilich 与 iOS4 你的意思是 iPhone 4？如果是这样，我已经尝试了 iOS 模拟器中的所有硬件可能性。这是：iPhone、iPhone 视网膜（3.5 英寸）和 iPhone 视网膜（4 英寸）

标签： ios css webkit mobile-safari media-queries

【解决方案1】：

默认情况下，iOS 浏览器提供一组默认屏幕尺寸，而与实际屏幕分辨率或方向无关。

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

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

如果您将此添加到您的页面，那么您的 @media 命令应该适用于每个设备的实际屏幕值。

我发现这些链接很有用：

【讨论】：

【解决方案2】：

好的。因为我认为解决方案很简单，与 CSS 媒体查询无关 >.

自从我编写了网站的第一个原型以来已经很久了，我不记得我是通过一个 javascript 语句加载 bg.jpg 图像，使用 anystretch 作为 backgroun-size:cover; 的后备。

感谢大家的回答和时间。

【讨论】：