高分辨率显示的 CSS @media 查询不起作用

Question

我设置了一些 CSS 来检测客户端是否使用 Retina 或其他 HiDPI 显示器，并为各种 div 显示不同的 background-image基于此。这是我的语法:

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

问题是，当我在像素比设置为 1.5(“类似于 1920x1200”)的 Retina MBP 上进行尝试时，显示的是普通分辨率图像而不是高分辨率图像。

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*/
       }