Question

我们的页面设计在我尝试过的每台PC浏览器中都很有效，但在使用iPhone或iPod Touch查看时却很奇怪。

问题与中心背景图像有很大关系：

#content_container
{

background-image:url('content-background.jpg');
background-position:top center;
background-repeat:no-repeat;
width:1020px;
height:auto;
}

content-background.jpg图像非常高（3000像素），并且由于内容的原因而被设计为“透露”，因为它正在增长。

你必须查看页面和完整的CSS才能理解，所以我从设计中剥离了其他所有东西，并用这个例子重新产生了问题：

http://files.codeulike.com/static/cssexample/example.htm
（例子由1个html文件，1个css文件和3个图像组成）

你会在IE8，Firefox，Chrome中看到你会得到一个漂亮的绿色框。但是在iOS浏览器中，长薄的背景图像会被重新缩放，一切都变得奇怪。

（我正在使用iPod Touch第二代，但我认为其他iPhone / iPod touch会出现同样的问题。）

任何帮助都非常感谢！

Answer 1

想出来：iPhone对Jpegs有百万像素的限制，之后它缩小了Jpeg。

在defusion.org.uk上有关于此的非常好的博文： http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

Jpegs缩小之后的限制似乎是大约2百万像素。它是一个记录在案的iOS资源限制，如下所述：

Apple - Creating Compatible Web Content - Know iOS Resource Limits

最大解码图像尺寸   JPEG是3200万像素使用   子采样。

JPEG图像最高可达3200万像素   由于子采样，它允许JPEG   要解码为具有的图像的图像   十六分之一的像素数。   JPEG图像大于2百万像素   被子采样 - 也就是说，被解码为a   缩小尺寸。 JPEG子采样允许   用户从中查看图像   最新的数码相机。

..我认为正常显示2百万像素以下的Jpegs，通过子采样（收缩）显示2到32百万像素之间的Jpegs，并且可能根本无法显示超过32百万像素的Jpegs。

更改我的网站以使用低于2百万像素的背景图像解决了这个问题。

Answer 2

不完全正确，我有一个背景1640x1200（sub 2Mpix），背景缩小......：S

Answer 3

我使用了Safaris CSS3多个背景图像来解决这个问题，只做了4张高500像素的图像并将它们放在彼此的顶部

Answer 4

我在写这篇文章的时候已经知道这篇文章已有两年了，但我尝试了一些有用的东西，也许不是最好的方法，但它解决了我的问题。

第一步是将我的背景图像保存为.png，完全解决了问题......除了是1200px x 12000px的背景图像外，.png文件还是一个怪物。

所以，我在Photoshop中打开了.png文件，并将其作为.jpg保存为网页和设备进行了优化，并上传了该文件，它在iPhone和所有5大浏览器上都像魅力一样。

希望有所帮助！

Answer 5

如果你保留了

background-attachment: fixed;

在桌面CSS文件中，然后记住它将其更改为

background-attachment: scroll;

移动CSS文件中的

。如果不这样做会显示出意想不到的效果。

CSS背景图像在iPhone上呈现不同

5 个答案: