Question

我尝试了以下css，但它对iPad3没有帮助。只有四分之一的图像适合iPad3。出了什么问题？

.titleIcon {
  float: left;
  background: url(/images/sprite.png);
  background-position: 0px 0px;
  width: 16px;
  height: 16px;
}



@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 3/2),
only screen and (        min-device-pixel-ratio: 1.5){ 

    .titleIcon{
        float: left;
        background: url(/images/sprite-2x.png) no-repeat 0 0;
        background-position: 0px 0px;                   
    }

}

Answer 1

ipad 3的像素比为2，因此您的媒体查询无效。将min-device-pixel-ratio：2添加到您的代码中。

进一步阅读：http://halgatewood.com/ipad-3-media-query/

Answer 2

具有视网膜显示器的设备使用虚拟视口，其中每个CSS像素实际上由两个设备像素组成。如果您创建一个100x100px的div，它在视网膜显示器上看起来与在常规显示器上看起来相同，即使它在视网膜显示器上的设备像素实际上是200x200px。

通常这是一件好事，但这意味着您的超高分辨率图像在视网膜显示屏上看起来与在常规显示屏上看起来一样大（即太大而不适合）。如果你希望整个东西可见，你需要将它缩小到一半大小。

在常规显示器上，这意味着失去分辨率，但由于视网膜显示器每个CSS像素有两个设备像素，因此取消，图像显示完全符合预期。

iPad3上的Retina显示使用css设置背景图像

2 个答案: