html - ipad2 safari 显示质量差的 jpg

Question

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

<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 尺寸的原始图像并使用max-width或width属性设置图像的原始尺寸。

阅读这篇文章了解更多信息

Answer 2

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

Answer 3

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