Question

我设置了一些CSS来检测客户端是使用Retina还是其他HiDPI显示器，并根据它显示不同background-image的各种div。这是我的语法：

<!-- LoDPI and MedDPI displays -->
#div {
    opacity:0.4;
    position:absolute;
    top:0px;
    z-index:2;
    width:1600px;
    height:900px;
    animation-name:ring;
    animation-delay:0s;
    animation-duration:1500ms;
    animation-timing-function:cubic-bezier(0.225, 1.650, 0.000, 0.805);
    animation-fill-mode:forwards;
    background-image:url(/valid/path/to/regular/file);
}

<!-- For Retina and HiDPI displays -->
@media only screen and (min-device-pixel-ratio: 1.4) {
#div {
    background-image:url(/valid/link/to/HiDPI/file);
    background-position:center;
    background-size:contain;
    }
}

问题是，当我在我的Retina MBP上尝试这个时，其像素比率设置为1.5（“就像1920x1200”），显示正常分辨率图像而不是高分辨率图像。

Answer 1

你没有关闭所有花括号。无论如何，为了获得更好的支持矩阵，请用

替换媒体查询

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

Answer 2

我有同样的问题： min-device-pixel-ratio似乎不受前缀js支持（前缀）！ min-device-pixel-ratio不符合W3C标准。

当我将它与供应商前缀一起使用时，一切正常吗？！

这对我来说很好（删除评论）

@media (-webkit-min-device-pixel-ratio: 2), /*  Firefox16, Chrome, Safari, iOS, Android */
       (min--moz-device-pixel-ratio: 2),    /*  Older Firefox browsers (prior to Firefox16) */
       (-o-min-device-pixel-ratio: 2/1),    /*  Opera */
       (min-device-pixel-ratio: 2),         /*  not defined yet, http://www.w3.org/TR/css3-mediaqueries/ */
       (min-resolution: 2dppx),             /*  not yet, probably in future, see http://www.w3.org/TR/css3-mediaqueries/ */
       (min-resolution: 192dpi)             /*  works for non css3 browser */
       {
            /* your styles go here */
       }

Opera值应为1 / 1,3 / 2,2 / 1，相当于1,1.5和2.
dpi值应为96,144,192，相当于1,1.5和2.

使用-webkit-text-size-adjust：none;从纵向模式转为横向模式时，字体大小不会在iPhone上爆炸; - ）

用于高分辨率显示的CSS @media查询无法正常工作

2 个答案: