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

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个像素)和被设计为"显示"作为DIV它是在生长由于内容.

你必须看一下页面和完整的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 - 创建兼容的Web内容 - 了解iOS资源限制

使用子采样,JPEG的最大解码图像尺寸为3200万像素.

由于子采样,JPEG图像可以达到3200万像素,这使得JPEG图像可以解码为像素数量的十六分之一.大于2百万像素的JPEG图像被二次采样 - 即,解码为缩小的尺寸.JPEG子采样允许用户查看来自最新数码相机的图像.

..我认为正常显示2百万像素以下的Jpegs,通过二次采样(收缩)显示2到32百万像素之间的Jpegs,并且可能根本无法显示超过32百万像素的Jpegs.

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