切換視網膜顯示的CSS精靈表：圖像出來兩次大

我正在使用CSS精靈表爲我爲移動設備創建的頁面。我有我怎麼想它的佈局，這裏是我使用的CSS（這看起來Chrome Canary版的iPhone 3GS模擬器罰款）：切換視網膜顯示的CSS精靈表：圖像出來兩次大

div#logo { 
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px 0px no-repeat; 
    display: inline-block; 
    width: 90px; 
    height: 44px; 
    display:block; 
    float:right; 
    margin:10px; 
} 

div#stars { 
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -46px no-repeat; 
    display: inline-block; 
    width: 71px; 
    height: 12px; 
} 

div#iPhone { 
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') 0px 0px no-repeat; 
    display: inline-block; 
    float:left; 
    width: 112px; 
    height: 238px; 
    margin-top: 54px; 
} 

div#separator { 
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -60px no-repeat; 
    display: inline-block; 
    width: 1px; 
    height: 53px; 
}

當然，當Retina顯示屏上查看此圖像出現略微像素化。我跟着this tutorial建議切換精靈表爲不同的顯示密度，並增加了這一點：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-resolution: 240dppx) { 

    div#logo { 
     background-image: url('/static/images/iphone/iphone_landing_sprites.png'); 
     background-position: -226px 0px; 
    } 

    div#stars { 
     background-image: url('/static/images/iphone/iphone_landing_sprites.png'); 
     background-position: -226px -91px; 
    } 

    div#iPhone { 
     background-image: url('/static/images/iphone/iphone_landing_sprites.png'); 
     background-position: 0px 0px; 
    } 

    div#separator { 
     background-image: url('/static/images/iphone/iphone_landing_sprites.png'); 
     background-position: -226px -117px; 
    } 
}

所以現在我的網頁仍然顯示在iPhone 3GS模擬器罰款（因爲@media開關沒有采取任何措施的話），但是當從iPhone 4模擬器看它的圖像來通過兩倍的大小。佈局保持不變（顯示圖像的框架大小相同），但圖像被裁剪，因此您只能看到每個圖像的左上角四分之一。

是否還有其他一些屬性需要指定，使圖像擠入雙密度像素，同時保持屏幕上的大小相同？

來源

2013-12-18 benwad

你試過在真正的Retina設備？我不知道模擬器是否可以重現視網膜顯示 – DaniP

如果您加載的視網膜尺寸是雙倍大小的圖像，您是否需要指定雙倍寬度/高度尺寸？ – grimmus

您可以使用Firefox來測試視網膜媒體查詢轉到「about：config」查找「layout.css.devPixelsPerPx 將其更改爲您所需的比例（1代表正常，2代表視網膜等。）和刷新。更多信息在這裏 - http://stackoverflow.com/questions/15551287/how-to-test-a-website-for-retina-on-windows-without-an-actual-retina-display – grimmus

我發現了一個解決方案：而不是定義新的偏移量爲每個元素，像這樣：

background-position: -226px 0px;

我們只需要「假裝」的形象是它使用的是相同的大小。所以我們將背景大小屬性設置爲較小精靈表的大小：

background-size: 204px 238px;

...而且這似乎工作！

來源

2013-12-18 16:56:34 benwad

切換視網膜顯示的CSS精靈表：圖像出來兩次大

回答

相關問題