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百万像素的背景图像解决了这个问题。

Answer 2

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

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

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

希望有所帮助！

Answer 3

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

Answer 4

如果你保留了

background-attachment: fixed;

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

background-attachment: scroll;

在移动CSS文件中。 如果没有这样做，它将显示意想不到的效果。

Answer 5

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