在 iPad 和 iPhone 上不正确地调整 CSS 背景图像的大小。答案

【问题标题】：CSS background images resizing incorrectly on iPad and iPhone.在 iPad 和 iPhone 上不正确地调整 CSS 背景图像的大小。
【发布时间】：2014-04-04 04:49:41
【问题描述】：

我的网站的背景图片在 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;
}

【问题讨论】：

试试这个：width:auto;
你设置viewport了吗？例如：<meta name="viewport" content="width=device-width, initial-scale=1">
@Ruddy 是的，我正在使用<meta name="viewport" content="width=device-width, initial-scale=1.0">
@AndrewChappell 我认为你应该看看this。
我试过 width:auto 但没用

标签： html ios css

【解决方案1】：

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

background-attachment:scroll;

【讨论】：

在解决这个问题几个小时后，这个问题在几秒钟内解决了我的问题。谢谢！
非常感谢。谁能解释为什么这有效？是把桶卷当成卷轴吗？
工作得很好，我在桌面上使用固定并在移动设备中使用滚动。
两天尝试解决这个问题，这就是答案！谢谢！

【解决方案2】：

显然，iPad 的 Safari 是 downsampling 超过 1024px 阈值的图像。我曾尝试使用scroll 而不是fixed，但这并不成功。 Other tricks 也不适合我。

我 solved this 将我原本太大的 1600×1600 图像拆分为两个图像。正因为如此，我能够使用两个 1024 像素大小的图像，并获得了比以前更好的可读性。

也许这样的解决方法也适合你。

【讨论】：