Firefox，Windows DPI缩放和CSS最大宽度媒体查询

Question

我有一个网站，媒体查询根据浏览器宽度决定是否显示右栏。 CSS看起来像这样：

@media only screen and (max-width: 1152px) { 
    #column_right {display:none} 
} 

最近，我在一个Windows盒子里测试了DPI缩放设置为125％。显示器的分辨率设置为1024x768。所以理论上，因为只有1024个可用的CSS像素，所以我认为这将匹配媒体查询。

但是，这不是发生的行为！看起来媒体查询看起来不是CSS像素，而是设备像素，其中有1280（1024 x 125％）。这仅在Firefox中发生，因为Firefox使用Windows设置的设备像素比例，而所有其他浏览器（包括奇怪的是Internet Explorer）都使用1.0的默认设备像素比例。我说这是IE的奇怪，因为如果有一个浏览器应该尊重Windows设置，那就是IE。

无论如何，为什么这样，我将如何解决它？

Answer 1

如果屏幕分辨率低于某个宽度，您可以使用max-device-width来隐藏列。

如果屏幕分辨率高达1024像素宽，下面的示例将触发display: none媒体查询。超过1024像素会得到一个绿色的div。

div { 
 
    background: #F00; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
@media screen and (max-device-width: 1024px) { 
 
    div { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (min-device-width: 1024px) { 
 
    div { 
 
    background: green; 
 
    } 
 
}

<div></div>