背景图像仅占 iPhone 页面的一半答案

【问题标题】：Background Image covers only half the page on the iPhone背景图像仅占 iPhone 页面的一半
【发布时间】：2012-03-26 01:53:11
【问题描述】：

我有一个需要非常大的背景图片的网站。该页面在我尝试过的所有网络浏览器中都能正确加载，但 iPhone 和 iPad 上的 Safari 除外。在这两种移动设备上的 Safari 中，背景仅覆盖页面的左侧 50%。

从我所做的所有测试中，我可以看出这是因为我使用的背景图像的长度。这是我的 CSS：

#bodyLong
{
    background-image:url('/Images/TaylorProductsBackground3459.jpg');
    background-repeat:no-repeat;
    width: 1150px;
    height: 3459px;
    margin: 0 auto;
    text-align: left;
    padding: 0px;
    position:relative; 
}

我知道在这种情况下存在一些特别错误，因为如果我对 CSS 进行一次更改并设置 height: 1000px;，则背景图像将不再在页面背面显示两次。我能做些什么来解决这个问题？我不想使用这么大的图片，但这是客户的要求，否则我无法说服他们。

【问题讨论】：

标签： iphone html css

【解决方案1】：

我认为您遇到了 iOS 版 Safari 的限制。查看有关为移动设备创建网页的所有文档，您可能会发现有关图像大小限制的信息。

在这里查看答案：Image size limitations in mobile safari?

可能的解决方案可能是使用较小的图像尺寸并在细节不重要的情况下将其放大，或者将图像分解并平铺。

但是说真的，为什么需要 3500 像素大小的图像作为背景。坏主意(TM)

【讨论】：

【解决方案2】：

我知道由于 WebKit 的限制，有人谈论过 large images not rendering well on the new iPad。解决方法是使用渐进式 Jpeg。尝试将您的图像保存为渐进式 Jpeg，看看是否能解决问题。

【讨论】：

【解决方案3】：

您需要确保图像与屏幕分辨率匹配，并且您需要确保您的视网膜和非视网膜尺寸

【讨论】：