为什么setInterval调用screen.width/availWidth获取宽度始终不更新？

问题根因 #

1. screen.width、screen.availWidth 是对应设备显示器的属性，返回的是显示器的物理宽度、扣除系统任务栏等占用区域后的可用宽度，只要不修改显示器分辨率、系统显示布局，这两个值就固定不变，和浏览器窗口的尺寸没有任何关联。
2. 你的setInterval调用逻辑完全正常，之所以拿到固定值，是因为取值属性选择错误，screen.width本身就不等于当前浏览器窗口的宽度。

正确获取浏览器窗口宽度的属性 #

如果要拿到当前浏览器可视区域的实时宽度，根据需求选择以下两个属性即可：

• window.innerWidth：返回浏览器视口的总宽度，包含垂直滚动条的宽度
• document.documentElement.clientWidth：返回页面可视区域宽度，不含垂直滚动条的宽度

修正后的代码 #

仅需修改getScreenWidth函数的返回值：

function getScreenWidth() {
    // 二选一即可
    return window.innerWidth;
    // return document.documentElement.clientWidth;
}

修改后调整浏览器窗口尺寸，定时输出的数值就会同步更新。

优化建议 #

如果仅需要监听窗口尺寸变化，不需要定时轮询，直接监听resize事件性能更高：

window.addEventListener('resize', () => {
  const currentWidth = window.innerWidth;
  demo.innerHTML = currentWidth;
  console.clear();
  console.log(currentWidth);
})

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