Question

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

当我在iPad上观看它时，背景会缩小或者什么东西，它只是看起来很糟糕。如何在iPad上保持清晰并实现2px X 4px？谢谢你们。

Answer 1

模糊很可能是因为iPad视网膜显示器试图升级您的小背景图像。在iPhone 4和iPhone 3以及更新的Android设备上也会发生同样的事情。在CSS中使用以下代码来修复它。您将需要一个2px x 4px图像作为原始背景，以及双倍分辨率的相同图像（4px x 8px）。 @media查询允许您调整图片的@ 2x版本，然后使用css中的background-size: 4px;将其“缩小”回预期尺寸。

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视网膜上测试了这个片段，它修复了模糊。我希望这可以帮助你，如果你有任何问题，请告诉我！

Answer 2

好的，如果我做了什么。

将视口设置为

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

并修复了图像问题。但我不能放大和缩小了。但这个项目没有必要。 :)感谢您的帮助

如何在iPad上保留背景图片大小

2 个答案: