Question

我正在使用谷歌浏览器作为我的默认编码浏览器，并注意到一段时间以前的奇怪行为，但今天我想知道这是否正确。

简单示例：我的媒体查询设置如下：

@media (max-width: 1350px) {
    th.column-hidden, td.column-hidden {
      display: none;
    }
}

基于此，在满足1350px点之前，不应看到具有所述类的列。

当我调整浏览器屏幕大小时，我可以在右上角看到指示符，该列在1215px左右消失。可能导致这种不准确的原因是什么？

我注意到的一件事是我的macbook屏幕分辨率为2560x1600，但www.whatismyscreenresolution.com显示1440x900

修改我刚刚输入了使用媒体查询的其他页面的示例，这些页面准确无误。他们确实有所不同。

Answer 1

MacBook的物理分辨率实际上是1440x900。显示器的视网膜方面意味着它具有更高的DPI（每英寸点数），这使得它显示出更高的分辨率。浏览器不会影响DPI，只会影响您的物理分辨率。

Answer 2

尝试使用像这样的像素比率：

/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi) {
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    /* Retina-specific stuff here */
}

媒体查询不准确

2 个答案: