CSS背景图片在iPhone上渲染不同

9
我们有一个在所有我尝试的电脑浏览器上都表现良好的页面设计,但在 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也会出现同样的问题)。

非常感谢任何帮助!

5个回答

16

问题已经解决:iPhone对Jpeg有像素限制,超过限制后会缩小Jpeg。

关于这个问题,在defusion.org.uk网站上有一篇非常好的博客文章: http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

超过2百万像素后,Jpeg开始被缩小显示。这是iOS文档中记录的资源限制,这里进行了描述:

Apple - 创建兼容的Web内容-了解iOS资源限制

JPEG的最大解码图像尺寸为32百万像素,使用子采样技术。

由于子采样技术,JPEG图像的大小可以达到32百万像素。此技术使JPEG图像解码后的像素数量减少到原来的1/16。大于2百万像素的JPEG图像会被进行子采样,即缩小显示。JPEG子采样技术可以让用户查看来自最新数码相机的图像。

我理解这意味着:小于2百万像素的Jpeg正常显示,2到32百万像素之间的Jpeg通过子采样进行缩小显示,而超过32百万像素的Jpeg可能根本无法显示。

将我的网站背景图更换为小于2百万像素的图像后,问题得到了解决。


救了我的命!这正是我需要知道的。我以为我的CSS有问题,花了一个小时左右来破解它,直到我找到了这篇文章。谢谢!实际上,我不确定真正的限制是什么,我认为它是文件大小限制,而不是兆像素或宽度或高度。 - Brian
为了快速且云端地缩小移动图像,您可以使用http://tinysrc.net,这样可避免贫穷的浏览器和网络做出艰难的工作。 - James Pearce
关于 >32 百万像素完全不显示的问题是正确的——经过一个小时的调试,这是解决方案。如果直接指向图像,iOS Safari 可以加载该图像,但是当该图像作为背景时,在 OSX safari 的调试控制台中会显示一个破损图像符号,没有有用的信息。 - user208769

0

不完全正确,我有一个1640x1200(低于2Mpix)的背景,但在这里它会缩小... :S


1
请使用CSS3媒体查询(移动Safari可识别)并为iPhone创建较小的背景图像:@media screen and (max-device-width: 640px) { /* iPhone /类似设备的特殊样式 */ #affected_div(s){ background: url(images/smaller_bg_img_filename.jpg) top center no-repeat !important; } } - Brian

0

我意识到我写这篇文章时已经过去两年了,但我尝试了一些方法,也许不是最好的方法,但解决了我的问题。

第一步是将我的背景图像保存为 .png 格式,完全解决了问题...除了 .png 文件是一个 1200px x 12000px 的大文件之外。

因此,我在 Photoshop 中打开了 .png 文件,并将其优化为 Web 和设备的 .jpg 格式,然后上传该文件,在 iPhone 和所有主流浏览器上都可以完美显示。

希望这能帮到你!


0
我使用Safari的CSS3多背景图片来解决这个问题,只需制作4张高500像素的图片并将它们叠放在一起即可。

0

如果你保留了

background-attachment: fixed;

在桌面CSS文件中,记得将其更改为

background-attachment: scroll;

在移动端的CSS文件中进行设置,如果不这样做,会出现意料之外的效果。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接