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;
     }
}

谷歌浏览器将视网膜图像显示为css背景图像而非非视网膜

1 个答案: