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

Question

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

当我在 iPad 上查看它时，背景缩小或其他什么，它看起来只是粗糙。如何保持清晰并在 iPad 上实现 2px X 4px？多谢你们。

Answer 1

模糊很可能是由 iPad 视网膜显示屏试图放大您的小背景图像引起的。iPhone 4 与 iPhone 3 以及较新的 android 设备上也会发生同样的情况。在您的 CSS 中使用以下代码来解决此问题。您将需要一个 2 像素 x 4 像素的图像作为原始背景，以及双分辨率（4 像素 x 8 像素）的相同图像。该@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">

这解决了图像问题。但我不能放大和缩小了。但这对这个项目来说不是必需的。：） 谢谢您的帮助