CSS背景图像渲染不同在iPhone上 [英] CSS background image rendering differently on iPhone
问题描述
我们的页面设计在我尝试的每个PC浏览器中都很有效，但在使用iPhone或iPod Touch查看时会很奇怪。
We have a page design that works great in every PC browser that I have tried, but goes strange when viewed with an iPhone or iPod Touch.
问题是与居中的背景图像有关的事情非常高：
The problem is something to do with a centred background image thats very tall:
#content_container
{
background-image:url('content-background.jpg');
background-position:top center;
background-repeat:no-repeat;
width:1020px;
height:auto;
}
content-background.jpg 图片非常高（3000像素），并且由于内容的原因而被设计为透露，因为它正在增长。
The content-background.jpg image is very tall (3000 pixels) and is designed to be 'revealed' as the DIV it is in grows due to content.
你将不得不看一下页面和完整的CSS来理解，所以我从设计中剥离了其他所有东西并用这个例子重新产生了问题：
You'll have to look at the page and full CSS to understand, so I've stripped everything else out of the design and re-produced the problem with this example:
http://files.codeulike.com/static/cssexample/example.htm
b $ b（示例由1个html文件，1个css文件和3个图像组成）
http://files.codeulike.com/static/cssexample/example.htm
(example made up of 1 html file, 1 css file and 3 images)
你会看到在IE8，Firefox，Chrome中你会得到一个漂亮的绿色框。但是在iOS浏览器中，长薄的背景图像会被重新缩放，一切都变得奇怪。
You'll see that in IE8, Firefox, Chrome you'll get a nice green box. But in an iOS browser the long thin background image gets re-scaled and everything goes odd.
（我正在使用iPod Touch第二代但是我假设同样的问题将在其他iPhone / iPod触摸中发生。）
(I'm using an iPod Touch 2nd gen but I assume the same problem will happen in other iPhones/iPod touches).
任何帮助非常感谢！
推荐答案
想出来：iPhone对Jpegs有一个百万像素的限制，之后它缩小了Jpeg。
Figured it out: The iPhone has a megapixel limit for Jpegs, after which it shrinks the Jpeg.
有一篇关于此问题的非常好的博客帖子.org.uk：
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
There's a very good blog post about this on defusion.org.uk: http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
Jpegs收缩后的限制似乎在2百万像素左右。它是一个记录在案的iOS资源限制，如下所述：
The limit after which Jpegs get shrunk seems to be around 2 megapixels. Its a documented iOS resource limit and is described here:
Apple - 创建兼容的Web内容 - 了解iOS资源限制
JPEG的最大解码图像尺寸为32百万像素，使用
子采样。
The maximum decoded image size for JPEG is 32 megapixels using subsampling.
JPEG图像最高可达32百万像素
由于子采样，它允许JPEG
图像解码为具有
十六分之一像素数的大小。
大于2百万像素的JPEG图像
是二次采样的 - 也就是说，解码为
缩小的尺寸。 JPEG子采样允许
用户从
最新数码相机中查看图像。
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百万像素以下的Jpegs，通过二次采样（收缩）显示2到32百万像素之间的Jpegs，并且可能根本无法显示超过32百万像素的Jpegs。
.. which I take to mean that Jpegs under 2 megapixels are displayed normally, Jpegs between 2 and 32 megapixels are displayed by subsampling (shrinking), and Jpegs over 32 megapixels presumably can't be displayed at all.
更改我的网站以使用低于2百万像素的背景图像解决了这个问题。
Changing my site to use a background image that was under 2 megapixels solved the problem.
这篇关于CSS背景图像渲染不同在iPhone上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
