13英寸HP EliteBook：2K/4K分辨率CSS适配方案问询

我明白你的困扰——明明切换了2K/4K物理分辨率，但window.innerWidth却始终返回1536，这是因为系统的缩放比例把物理像素转换成了相同的CSS逻辑像素。要区分不同的物理分辨率，我们需要利用设备像素比（DPR）相关的CSS媒体查询，而不是依赖逻辑像素的宽度。

下面是两种可行的解决方案：

方案1：直接匹配设备像素比（最精准） #

你的设备在两种分辨率下的DPR是固定的：

• 2K（2560×1440）：2560 / 1536 = 1.6667（也就是5/3）
• 4K（3840×2160）：3840 / 1536 = 2.5

我们可以用标准的resolution媒体查询（配合dppx单位，直接对应DPR），加上WebKit前缀兼容主流浏览器：

/* 默认状态（匹配2K分辨率）：背景黑色 */
body {
  background-color: #000;
}

/* 匹配4K分辨率：背景红色 */
@media screen and (min-resolution: 2.5dppx),
       screen and (-webkit-min-device-pixel-ratio: 2.5) {
  body {
    background-color: #ff0000;
  }
}

如果你想更严格地匹配2K的DPR，可以补充这个查询（不过默认样式已经覆盖2K场景，所以可选）：

/* 精准匹配2K分辨率的DPR */
@media screen and (resolution: 1.6667dppx),
       screen and (-webkit-device-pixel-ratio: 5/3) {
  body {
    background-color: #000;
  }
}

方案2：结合逻辑宽度与DPR，锁定物理分辨率 #

如果你想明确针对物理宽度≥3840px的4K屏幕，可以结合逻辑宽度和DPR计算物理宽度：物理宽度 = 逻辑宽度 × DPR。对于你的设备，逻辑宽度是1536，所以4K的物理宽度是1536 × 2.5 = 3840px，对应的媒体查询如下：

body {
  background-color: #000;
}

/* 匹配物理宽度≥3840px的屏幕 */
@media screen and (min-width: 1536px) and (min-resolution: 2.5dppx),
       screen and (min-width: 1536px) and (-webkit-min-device-pixel-ratio: 2.5) {
  body {
    background-color: #ff0000;
  }
}

额外验证小技巧 #

你可以在浏览器控制台里输入window.devicePixelRatio，查看当前的DPR值：

• 切换到2K分辨率，应该返回1.6666666666666667
• 切换到4K分辨率，应该返回2.5

这能帮你确认媒体查询的条件是否正确。

内容的提问来源于stack exchange，提问作者Rijo