Question

我的网站需要非常大的背景图片。除了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;，则背景图像不再在页面背面显示两次。我该怎么做才能解决这个问题？我不想使用这么大的图像，但这是客户要求，否则我无法说服他们。

Answer 1

我认为你正在努力进入iOS版本的Safari。检查创建移动设备网页的所有doco，您可能会发现有关图像大小限制的信息。

在此处查看答案：Image size limitations in mobile safari?

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

但严重的是，为什么你需要3500px大小的图像作为背景。坏主意（TM）

Answer 2

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

Answer 3

您需要确保图像符合屏幕分辨率，并且需要确保视网膜和非视网膜尺寸

背景图片仅覆盖iPhone上一半的页面

3 个答案: