iPad和iPhone上CSS背景图片大小调整不正确。

Question

我的网站背景图片在Chrome和Safari中使用background-size：cover调整大小非常好，但是当我在ipad或iphone上测试我的网站时，CSS背景图片真的被放大了，看起来很糟糕。我已经阅读了许多其他与此有关的问题，在这里没有解决我的问题。

HTML

<div class="background"> 

</div><!--background-->

.background没有容器，且宽度为屏幕的100%。

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

- chap

---

尝试这个：width:auto; - Anand Jaju

你设置了“viewport”吗？例如：<meta name="viewport" content="width=device-width, initial-scale=1"> - Ruddy

@Ruddy 是的，我正在使用 <meta name="viewport" content="width=device-width, initial-scale=1.0">。 - chap

@AndrewChappell 我认为你应该看一下这个。 - Ruddy

我尝试了width:auto，但它没有起作用。 - chap

我遇到了同样的问题。Android 正确地渲染了背景。 - Etienne Dupuis

Answer 1

我曾经遇到同样的问题，我使用了SCROLL而不是FIXED。

background-attachment:scroll;

- Etienne Dupuis

---

在为这个问题努力工作了几个小时后，这个问题在几秒钟内解决了我的问题。谢谢！ - Tim Dearborn

非常感谢。有人能解释一下为什么这个有效吗？它是将桶滚动视为滚动吗？ - JacobLett

完全正常运作，我在桌面端使用固定布局，在移动设备上使用滚动布局。 - Ethan.R

两天都在尝试修复这个问题，结果这就是答案！谢谢！ - SysHex

Answer 2

显然，iPad的Safari会对超过1024px阈值的图像进行缩小处理。我尝试使用scroll而非fixed，但并不成功。其他技巧对我也没有用。

我通过将原本过大的1600×1600像素图片分成了两张小图片来解决了这个问题。由于这样，我能够使用两张1024px大小的图片，并且比以前更易读了。

也许像这样的解决方法对您也有用。

- WoodrowShigeru