Chrome DevTools视口宽度差异：窗口Resize与Device Toolbar值不一致

问题根因 #

你遇到的15px宽度偏差是浏览器默认垂直滚动条占位导致的，Chrome桌面端默认滚动条宽度恰好为15px左右，两种调试场景的差异来自滚动条的占位逻辑不同：

• 开启DevTools设备工具栏调试时，默认模拟移动端视口，滚动条为悬浮不占位样式，不会挤占布局空间，此时媒体查询判断的宽度和你设置的窗口宽度完全一致，因此991.98px断点触发符合预期。
• 关闭设备工具栏直接拖动浏览器窗口调整大小时，若页面内容高度超过视口高度，右侧会出现占位型垂直滚动条，媒体查询max-width的判定基准为滚动条挤占后的实际布局视口宽度，而非整个浏览器窗口的宽度。比如窗口总宽度为992px时，减去15px滚动条宽度，实际布局视口仅为977px，和你观测到的断点触发偏差完全匹配。

验证方法 #

给页面添加临时样式body { overflow-y: hidden; }关闭垂直滚动条，再拖动窗口测试断点触发逻辑，此时两种调试场景的断点触发宽度将完全一致。

适配方案 #

• 方案1：自定义滚动条为悬浮不占位样式，避免滚动条挤占布局宽度：

/* 仅对Chrome、Edge等webkit内核浏览器生效 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #bbbbbb;
  border-radius: 4px;
}

• 方案2：Bootstrap 5原生断点设计已考虑滚动条占位的场景，实际生产环境用户访问的表现和直接拖动窗口调试的表现一致，无需额外调整，日常开发以设备工具栏的调试结果为准即可。
• 方案3：如果需要严格以窗口总宽度为断点判定基准，可改用JavaScript监听window.innerWidth做响应式逻辑控制。

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