2

我正在使用移动优先开发方法开发一个网站（ 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 图像，因为它位于媒体查询中。但这是我向下滚动一点时得到的：

从 iPhone 5 看到的别墅-安东尼娅

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

我真的不知道为什么要加载图像……有什么想法吗？

PS：iPad 和 iPhone 4（以及所有其他可以在 iOS 模拟器上测试的设备）中也会发生同样的情况。

4

2 回答 2

7

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

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

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

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

我发现这些链接很有用：

于 2013-08-15T08:17:52.423 回答
0

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

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

谢谢大家的回答和时间。

于 2013-04-14T11:13:27.307 回答