谷歌浏览器将视网膜图像显示为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; 
    } 
}