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

Question

我正在研究的网站可以在这里看到.如果您查看iPad 3或iPhone 4上的"关于"或"联系"部分,背景看起来都是疯狂的像素化.

我有这样的background-size设置,cover以便当用户调整大小时它适当缩放,但在iPad或iPhone上看起来很糟糕.

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

谢谢.

Answer 1

这是因为您正在使用background-attachment:fixed- 无论出于何种原因,当background-size: cover在iOS上使用时会导致此行为.(我在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属性background-size

这是我找到解决方案的文章.

可爱的网站设计BTW.