css - 如何在 iPad 上保持背景图像大小

Question

我的网站上有一张 2px X 4px 的背景图片，它在 X 和 Y 上重复。

当我在 iPad 上查看它时，背景会缩小或出现其他问题，它看起来只是有棱 Angular 。我怎样才能保持清晰并在 iPad 上实现 2px X 4px？谢谢大家。

Answer 1

模糊很可能是由于 iPad 视网膜显示屏试图放大您的小背景图像造成的。同样的事情发生在 iPhone 4 和 iPhone 3，以及更新的安卓设备上。在您的 CSS 中使用以下代码来修复该问题。您将需要一个 2px x 4px 的图像作为原始背景，以及双倍分辨率(4px x 8px)的相同图像。 @media查询允许您调整图像的 @2x 版本大小，然后使用 background-size: 4px; 将其“缩小”到预期大小在 CSS 中。

body {
    background: url(test-image.png) repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           body {background: url(test-image@2x.png) repeat; background-size: 4px;}
}

我已经在我的 iPad 视网膜上测试了这段代码，它修复了模糊问题。希望这对您有所帮助，如果您有任何问题，请告诉我!