4

我正在开发的网站可以在这里看到。如果您查看 iPad 3 或 iPhone 4 上的“关于”或“联系方式”部分，背景看起来全是疯狂的像素化。

我已经background-size设置好了，cover所以当用户调整它的大小时，它会适当地缩放，但是在 iPad 或 iPhone 上它看起来很糟糕。

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

谢谢你。

4

2 回答 2

12

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

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

/* 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，因为它无法识别coverbackground-size

这是我从中找到解决方案的文章。

可爱的网站设计顺便说一句。

于 2012-09-20T02:01:21.077 回答
2

在为 IOS 创建高分辨率图像时，您需要使用高分辨率媒体查询，您似乎已经在这样做了。此外，您的图像应该是两倍大，然后缩小到 50% 以获得高视网膜。 

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

这种方法应该可以工作。如果没有，请确保您有适当的元标记，并仔细检查您的代码。

于 2012-07-22T19:53:34.390 回答