ipad2 safari显示质量差的jpg

Question

我在使用大型jpg在ipad 2上正确显示时遇到一些困难。该文件为9577x600像素，并在div上设置为背景图像。我在该div上定义了-webkit-background-size并将其设置为与图像相同的尺寸。我还将viewport元标记设置为：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

我的css是：

#content { position: relative; background: url(../images/infographic.jpg) left top no-repeat; width: 9577px; height: 600px; -webkit-background-size: 9577px 600px; }

以下是我在ipad上看到的与我在桌面上看到的相比的截图：

有谁知道造成这种情况的原因是什么？

Answer 1

您应始终将双倍尺寸的图像（高清图像）用于手机和iPad等设备。

例如，您的显示图片尺寸为200 * 200，那么您应该拍摄400 * 400 dimensio的原始图像，并使用max-width或width属性来设置图像的原始尺寸。

阅读此ARTICLE了解更多信息

Answer 2

您是否尝试过没有meta标记行和/或没有-webkit-background-size属性？

Answer 3

问题解决了 - 我不得不将大图像分成两个，并将它们作为两个不同div上的背景图像。 ipad必须在大像素尺寸上挣扎。