网站屏幕宽度检测异常，隐藏浏览器滚动条恢复正常求助

嘿，我之前也碰到过一模一样的情况！先给你拆解下原因和解决办法：

问题根源 #

你用$(window).width()获取的是浏览器可视内容区域的宽度，而Chrome的滚动条默认会占据一部分可视区域空间（Mac上大概是15px）。当页面内容超出屏幕需要显示滚动条时，这个宽度就会被减去滚动条的宽度，所以你看到1440-15=1425px；隐藏滚动条后，可视区域就和屏幕分辨率一致了，自然回到1440px。

解决方案 #

根据你的需求不同，有两种处理方式：

1. 获取屏幕物理分辨率宽度（不受浏览器影响） #

如果你的目标是拿到MacBook Pro的1440px屏幕分辨率，直接用原生JS的screen.width就行，它是系统返回的屏幕硬件宽度，完全不受浏览器滚动条或窗口大小影响：

const screenResolutionWidth = screen.width;
console.log(screenResolutionWidth); // 会输出1440

2. 获取包含滚动条的浏览器窗口总宽度 #

如果需要的是整个浏览器窗口的宽度（包括滚动条），可以用window.outerWidth：

const fullBrowserWidth = window.outerWidth;
console.log(fullBrowserWidth); // 滚动条显示时也会返回1440左右

3. 响应式设计的正确姿势 #

如果是做响应式布局，其实$(window).width()是更合适的——因为响应式本来就是基于用户能看到的内容区域来适配的，滚动条占用的空间本来就不属于可显示内容的区域。

补充小技巧 #

不同浏览器的滚动条宽度可能略有差异，Mac上Chrome默认是15px，Windows上可能更宽一些。如果需要动态获取滚动条宽度，可以用这个方法：

function getScrollbarWidth() {
  const scrollDiv = document.createElement('div');
  scrollDiv.style.width = '100px';
  scrollDiv.style.height = '100px';
  scrollDiv.style.overflow = 'scroll';
  scrollDiv.style.visibility = 'hidden';
  document.body.appendChild(scrollDiv);
  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);
  return scrollbarWidth;
}
console.log(getScrollbarWidth()); // 输出当前浏览器的滚动条宽度

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