background-size：封面在视网膜显示屏上看起来像素化 [英] background-size: cover looks pixelated on retina display

问题描述

我正在处理的网站可以在此处查看。如果您在iPad 3或iPhone 4上查看关于或联系人部分，背景看起来就像是疯狂的像素化。

我有 background-size 设置为封面，这样当用户调整大小时，它可以适当缩放，但在iPad或iPhone上看起来很糟糕。

有关如何解决这个问题的任何帮助或提示，仅适用于 @media屏幕和（min-device-pixel-ratio：2）



谢谢。

解决方案

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

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

  / * for background-size：iOS上的封面替换设备* / 
 @media仅屏幕和（方向：纵向）和（设备宽度：320px），（设备宽度：768px）{
标题{
 -webkit-background-size ：汽车150％; 
 background-attachment：scroll; 
 
 
 @media仅屏幕和（orientation：landscape）和（device-width：320px），（device-width：768px）{
 
 header {
 -webkit-background-size：150％auto; 
 background-attachment：scroll; 
 
 
  

-webkit-background -size 属性也适用于iOS，因为它无法识别 background-size cover 属性c $ c>

这里的文章我找到了我的解决方案。

可爱的网站设计BTW。

The website I'm working on can be seen here. If you check out the 'About' or 'Contact' section on iPad 3 or iPhone 4 the background looks all crazy pixelated.

I've got the background-size set to cover so that when the user resizes it it scales appropriately, however on iPad or iPhone it looks terrible.

Any help or tips on how to fix this for devices @media only screen and (min-device-pixel-ratio: 2)?

Thank you.

解决方案

It's because you are using background-attachment:fixed - for whatever reason this when used with background-size: cover on iOS causes this behavior. (I had this same bug at http://jag.is and just resolved it today).

So if you add the following it should be resolved:

/* 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;
    }
}

The -webkit-background-size property is for iOS as well because it doesn't recognize the cover property for background-size

Here's the article I found my solutions from.

Lovely site design BTW.

这篇关于background-size：封面在视网膜显示屏上看起来像素化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！