Google Chromeは、網膜以外の画像ではなく網膜の画像を表示します

Question

最新のGoogle Chromeを使用すると、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/

Chromeは400x400のバージョン、非網膜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; 
    } 
}