背景大小：在視網膜顯示器上看起來像是像素化

我正在處理的網站可以看到here。如果您在iPad 3或iPhone 4上查看「關於」或「聯繫」部分，背景看起來就像是瘋狂的像素化。背景大小：在視網膜顯示器上看起來像是像素化

我已將background-size設置爲cover，以便在用戶調整大小時適當縮放，但在iPad或iPhone上看起來很糟糕。

任何幫助或提示如何解決這個設備@media only screen and (min-device-pixel-ratio: 2)？

謝謝。

2012-07-22 Jesse Atkinson

你在說什麼元素？你能粘貼適當的html和css在這裏給我們看，否則我們不知道你指的是哪個圖片。我猜你的意思是標題背景，但？ http://ourcityourstory.com/dev/img/header-bg.jpg – 2012-07-22 18:42:14

About和Contact部分的背景。標題部分的背景實際上是絕對定位的圖像。 – 2012-07-22 18:46:03

我似乎在使用background-size：cover在我的網站（http://jag.is）上遇到同樣的問題。它在所有分辨率的桌面瀏覽器中都可以正常工作，但在iPhone Safari上卻是一團糟。（請參閱介紹部分的背景，標題爲「像素完美設計和代碼」） – 2012-09-15 16:21:41

這是因爲您正在使用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屬性background-size

Here's the article我發現我的解決方案從。

可愛的網站設計順便說一句。

來源

2012-09-20 02:01:21

爲IOS創建高分辨率圖像時，您需要使用高分辨率媒體查詢，您似乎已經在這樣做。此外，您的圖像應該是兩倍大，然後縮小到高視網膜的50％。

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

此方法應該工作..如果它不，那麼確保你有適當的元標記，並仔細檢查你的代碼。

來源

2012-07-22 19:53:34

我已經完成了所有這些工作。我正在談論屬性background-size：cover。它搞砸了，但我需要它來覆蓋。 – 2012-07-22 20:09:40

背景大小：在視網膜顯示器上看起來像是像素化

回答

相關問題