css - Firefox、Windows DPI 缩放和 CSS 最大宽度媒体查询

Question

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

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

最近，我在 DPI 缩放比例设置为 125% 的 Windows 机器上对此进行了测试。显示器的分辨率设置为 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 媒体查询。超过 1024px 会得到一个绿色的 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>