为何Media Query触发值小于设定值？Brave浏览器适配异常排查

偏差核心原因：滚动条的宽度计算差异 #

CSS媒体查询的max-width/min-width和你JS代码里获取的宽度，本质是两个不同的计算标准：

• CSS的@media判断的是不含滚动条的视口宽度，对应JS里的document.documentElement.clientWidth值
• 你代码里误写了windowEl.innerWidth（这里windowEl是DOM元素，不是window对象），就算改成window.innerWidth，它也是包含滚动条的窗口内部宽度。滚动条默认占15-20px左右，所以当JS显示985px时，实际不含滚动条的视口宽度已经达到1000px，Media Query就触发了——这就是你看到“触发值小于设定值”的原因，只是两者的计算口径不一样。

修正方法 #

1. 统一宽度获取逻辑 #

把JS里的宽度获取改成和CSS媒体查询一致的方式，这样显示的数值就会和Media Query的触发条件完全匹配：

let windowEl = document.querySelector('.window-properties')
setInterval(() => {
  // 用这个获取和CSS一致的视口宽度
  let width = document.documentElement.clientWidth;
  let height = document.documentElement.clientHeight;
  windowEl.innerHTML = `${width}, ${height}`
}, 1)

2. 明确两种宽度的区别 #

• window.innerWidth：浏览器窗口内部的总宽度，包含垂直滚动条（如果存在）
• document.documentElement.clientWidth：HTML根元素的可视宽度，不包含滚动条，这也是CSS媒体查询依赖的宽度标准

3. Brave浏览器的验证 #

Brave基于Chromium内核，滚动条的计算逻辑和Chrome完全一致，不存在特殊差异，问题本质还是计算口径不统一导致的。

补充提示 #

如果页面不需要滚动条，可以通过body { overflow: hidden; }隐藏，此时两种宽度数值会一致，但实际开发中更推荐统一使用document.documentElement.clientWidth来匹配CSS的逻辑，确保触发时机一致。

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