我们的页面设计在我试过的所有 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 也会出现同样的问题)。
非常感谢任何帮助!
最佳答案
弄清楚了:iPhone 对 Jpeg 有百万像素限制，之后它会缩小 Jpeg。
在 defusion.org.uk 上有一篇关于此的非常好的博客文章: http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
Jpeg 缩小后的极限似乎在 2 兆像素左右。它是记录在案的 iOS 资源限制，在此处进行了描述:
Apple - Creating Compatible Web Content - Know iOS Resource Limits
The maximum decoded image size for JPEG is 32 megapixels using subsampling.
JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
.. 我的意思是 2 兆像素以下的 Jpeg 可以正常显示，2 到 32 兆像素之间的 Jpeg 通过子采样(缩小)显示，而超过 32 兆像素的 Jpeg 可能根本无法显示。
将我的网站更改为使用低于 2 百万像素的背景图片解决了这个问题。
关于iphone - CSS 背景图像在 iPhone 上呈现不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3884444/