html - ipad2 safari 显示质量差 jpg

Question

我在 ipad 2 上正确显示大 jpg 时遇到了一些困难。该文件为 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 尺寸的原始图片并使用 max-width 或 width 属性来设置图像的原始尺寸。

阅读此 ARTICLE了解更多信息