0

我尝试了以下 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;                   
    }

}
4

2 回答 2

1

ipad 3 的像素比为 2，因此您的媒体查询还不能正常工作。将 min-device-pixel-ratio: 2 添加到您的代码中。

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

于 2013-05-03T08:40:44.630 回答
0

具有视网膜显示器的设备使用虚拟视口，其中每个 CSS 像素实际上由两个设备像素组成。如果你创建一个 100x100px 的 div，它在 Retina 显示屏上的大小与在普通显示屏上的大小相同，即使它在 Retina 显示屏上的设备像素实际上是 200x200px。

通常这是一件好事，但这意味着您的超高分辨率图像在视网膜显示器上看起来与在普通显示器上一样大（即太大而无法容纳）。如果你想让整个东西都可见，你需要把它缩小到一半。

在常规显示器上，这将意味着分辨率下降，但由于视网膜显示器的每个 CSS 像素有两个设备像素，因此这会抵消并且图像完全按照预期显示。

于 2013-05-03T08:50:40.370 回答