Windows显示缩放150%时min-width:1920px媒体查询失效求助

问题根源在于Windows显示缩放会让浏览器以逻辑像素作为媒体查询的判断基准，而非屏幕的物理像素。比如1920px物理宽度的屏幕，在150%缩放时，浏览器报告的逻辑宽度是1920 / 1.5 = 1280px，自然触发不了min-width:1920px的规则。

以下是几种可行的绕过方法：

1. 针对不同缩放比例编写媒体查询 #

针对常见的Windows缩放比例（100%、125%、150%、200%），分别计算对应逻辑像素阈值，组合媒体查询：

/* 100%缩放（dpr=1），物理1920px对应逻辑1920px */
@media (min-width: 1920px) {
  /* 你的样式 */
}

/* 125%缩放（dpr=1.25），物理1920px对应逻辑1536px */
@media (min-width: 1536px) and (min-device-pixel-ratio: 1.25) {
  /* 同样的样式 */
}

/* 150%缩放（dpr=1.5），物理1920px对应逻辑1280px */
@media (min-width: 1280px) and (min-device-pixel-ratio: 1.5) {
  /* 同样的样式 */
}

/* 200%缩放（dpr=2），物理1920px对应逻辑960px */
@media (min-width: 960px) and (min-device-pixel-ratio: 2) {
  /* 同样的样式 */
}

这种方法无需JS，纯CSS实现，但需要覆盖常见的缩放比例。

2. 用JS检测物理像素并添加样式类 #

通过JavaScript直接获取屏幕物理宽度，动态给页面元素添加类，再基于类编写样式，不受系统缩放影响：

// 检测物理宽度是否达到1920px
const physicalScreenWidth = window.screen.width * window.devicePixelRatio;
if (physicalScreenWidth >= 1920) {
  document.body.classList.add('physical-large-screen');
}

// 可选：监听窗口缩放变化，实时更新
window.addEventListener('resize', () => {
  const newPhysicalWidth = window.screen.width * window.devicePixelRatio;
  if (newPhysicalWidth >= 1920) {
    document.body.classList.add('physical-large-screen');
  } else {
    document.body.classList.remove('physical-large-screen');
  }
});

然后在CSS中编写对应样式：

.physical-large-screen {
  /* 原媒体查询中的样式 */
}

这种方法更灵活，能覆盖所有缩放比例，适合需要精准匹配物理屏幕尺寸的场景。

3. 尝试调整viewport元标签（桌面端有限生效） #

添加viewport元标签，强制浏览器以设备物理宽度为基准渲染，但部分桌面浏览器对viewport的支持不如移动端完善，可以尝试：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

注意：此方法可能影响页面在不同缩放比例下的显示效果，需测试验证。

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