谷歌瀏覽器將視網膜圖像顯示爲css背景圖像而不是非視網膜

Question

當使用最新的谷歌瀏覽器時，Chrome會將視網膜圖像加載到非視網膜顯示屏上。當我在Safari中測試它時，Safari會加載非視網膜圖像。 Chrome是否使用不同的前綴？我似乎無法找到如何解決這個問題的信息。

CSS：

.background-image { 
    background-image: url(../image.png); 
    background-size: 200px 200px; 
} 

@media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min--moz-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ration: 2/1), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 192dpi), 
    only screen and (min-resolution: 2dppx) { 
    .background-image { 
     background-image: url(../image-hi-res.png); 
     background-size: 400px 400px; 
    } 
} 

這裏是的jsfiddle一個例子：https://jsfiddle.net/g52usso0/1/

鉻非視網膜機上裝載400×400的版本，非視網膜Safari瀏覽器拿起200x200的版本。

Answer 1

嘗試更類似這樣的東西。您不想爲高分辨率版本添加更大的背景大小。它應該是「縮放」你原來的背景大小：

.background-image { 
    background: url(../image.png) no-repeat; 
    background-size: 200px 200px; 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .background-image { 
      background: url(../image-hi-res.png) no-repeat; 
    } 
}