iPad3上的視網膜顯示使用css設置背景圖像

我嘗試了以下css，但它對iPad3沒有幫助。只有四分之一的圖像符合iPad3。出錯了？iPad3上的視網膜顯示使用css設置背景圖像

.titleIcon { 
    float: left; 
    background: url(/images/sprite.png); 
    background-position: 0px 0px; 
    width: 16px; 
    height: 16px; 
} 



@media 
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and ( min--moz-device-pixel-ratio: 1.5), 
only screen and ( -o-min-device-pixel-ratio: 3/2), 
only screen and (  min-device-pixel-ratio: 1.5){ 

    .titleIcon{ 
     float: left; 
     background: url(/images/sprite-2x.png) no-repeat 0 0; 
     background-position: 0px 0px;     
    } 

}

來源

2013-05-03 user930514

ipad 3的像素比例爲2，因此您的媒體查詢不起作用。將min-device-pixel-ratio：2添加到您的代碼中。

進一步閱讀：http://halgatewood.com/ipad-3-media-query/

來源

2013-05-03 08:40:44

我試着用2而不是1.5。沒有幫助:( – user930514 2013-05-03 08:43:20

也許你應該有一個背景大小？閱讀這篇文章btw：http://mikepultz.com/2012/03/how-to-make-images-look -good-on-the-ipad-3/ – 2013-05-03 08:48:55

我將寬度和高度設置爲16px。background-size屬性對我來說也不適用於桌面瀏覽器的普通圖像。儘管如此，圖像看起來太大了fit – user930514 2013-05-03 09:24:02

與視網膜的顯示裝置使用，其中每個CSS像素實際上是由兩個設備像素的虛擬視口。如果您創建一個100x100像素的div，則它在視網膜顯示器上的尺寸與在常規顯示器上顯示的尺寸相同，即使在設備像素方面它在視網膜顯示器上實際爲200x200px。

通常這是一件好事，但這意味着您的額外高分辨率圖像在視網膜顯示屏上看起來與在常規顯示屏上顯示的一樣大（即太大而不適合）。如果你想讓整個事物可見，你需要將它縮小到一半的大小。

在常規顯示屏上，這意味着失去分辨率，但由於視網膜顯示屏每個CSS像素有兩個設備像素，因此會取消並且圖像完全按照預期顯示。

來源

2013-05-03 08:50:40

iPad3上的視網膜顯示使用css設置背景圖像

回答

相關問題