Question

我正在研究的网站here。如果您查看iPad 3或iPhone 4上的“关于”或“联系”部分，背景看起来都是疯狂的像素化。

我已将background-size设置为cover，这样当用户调整大小时，它会适当缩放，但在iPad或iPhone上看起来很糟糕。

有关如何为设备@media only screen and (min-device-pixel-ratio: 2)解决此问题的任何帮助或提示？

谢谢。

Answer 1

这是因为您正在使用background-attachment:fixed - 无论出于何种原因，这与iOS上的background-size: cover一起使用会导致此行为。（我在http://jag.is遇到同样的错误，今天就解决了。）

因此，如果您添加以下内容，则应解决此问题：

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

-webkit-background-size属性也适用于iOS，因为它无法识别cover的{{1}}属性

Here's the article我找到了解决方案。

可爱的网站设计BTW。

Answer 2

为IOS创建高分辨率图像时，您需要使用高分辨率媒体查询，您似乎已经在进行此操作。此外，您的图像应该是两倍大，然后缩小到高视网膜的50％。

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
            #header { background: url(headerRatio2.png); background-size: 50%; }
        }

此方法应该有效..如果没有，请确保您有适当的元标记，并仔细检查您的代码。

background-size：封面在视网膜显示屏上看起来像素化

2 个答案: