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

Posted 2023-03-06

【中文标题】高分辨率显示的 CSS @media 查询不起作用

【英文标题】：CSS @media queries for high-res displays not working

【发布时间】：2012-09-20 22:05:35

【问题描述】：

我设置了一些 CSS 来检测客户端是否使用 Retina 或其他 HiDPI 显示器，并基于此为各种 divs 显示不同的 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;
    

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

【参考方案1】：

我遇到了同样的问题： min-device-pixel-ratio 似乎不被无前缀的 js 支持（前缀）！？ min-device-pixel-ratio 不符合 W3C。

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

这对我来说很好（删除 cmets）

@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 上的字体大小不会爆炸 ;-)

【参考方案2】：

你没有把所有的花括号都合上。无论如何，为了获得更好的支持矩阵，请将您的媒体查询替换为

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

【讨论】：

实际上，我应该提到我已经包含了 Prefix Free JS，并且我错过了最初问题中的结束 @media 括号。

我不能确定这是否是一个错字。您是否也在使用 CSS cmets 而不是 html cmets？不过，我不熟悉不同的 Prefix Free 类 JS 变通办法在媒体查询方面的效果如何。

到目前为止，它们工作得很好；我网站上的所有其他媒体查询都可以正常工作（大多数用于分辨率），并且使用相同的语法。

其实，你知道W3C规范除了min-device-pixel-ratio之外，是否还包括max-device-pixel-ratio？

这是最小--moz-device-pixel-ratio。 developer.mozilla.org/en-US/docs/CSS/…