为何响应式设计在设备模拟器中正常，缩放浏览器却失效？

• 问题根源：window.screen.availWidth 获取的是设备屏幕的可用宽度（扣除任务栏等系统UI后的屏幕固定宽度），这个值不会随浏览器窗口缩放而改变。只有切换设备分辨率，或是在设备模拟器中模拟不同设备时，该值才会变化。这不是浏览器bug，纯粹是你用错了检测属性——你需要的是浏览器视口宽度，而非屏幕硬件宽度。

• 正确的视口宽度检测属性：

  • window.innerWidth：包含滚动条宽度的浏览器视口宽度
  • document.documentElement.clientWidth：不含滚动条宽度的视口宽度（更适合响应式布局判断）

• 修改后的代码示例：

const viewportWidth = document.documentElement.clientWidth;
if (viewportWidth > 1024 && viewportWidth < 1200) {
  // 视口宽度在1025-1199区间的逻辑
} else if (viewportWidth > 1200) {
  // 视口宽度大于1200的逻辑
}

• 监听视口变化的补充：如果需要实时响应窗口缩放，要结合resize事件：

window.addEventListener('resize', () => {
  const viewportWidth = document.documentElement.clientWidth;
  // 执行响应式逻辑
});

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