无垂直滚动条时window.innerWidth与outerWidth为何不相等？

你观察到的这个现象完全正常，这是Chromium内核浏览器（包括Edge和Chrome）在Windows 10系统下的标准实现，和你看到的MDN文档描述差异，其实是因为文档的理论描述和实际浏览器适配系统窗口框架的细节不同。

下面具体拆解原因：

• 先明确两个属性的核心定义（基于最新MDN内容）：

  • outerWidth：统计的是整个浏览器窗口的总宽度，包含窗口的左右边框、系统级的窗口空白区域，以及所有浏览器UI之外的框架部分。
  • innerWidth：指的是网页内容实际显示的视口宽度，既不包含浏览器的窗口边框，也不包含垂直滚动条（当滚动条不存在或处于自动隐藏状态时）。

• 在Windows 10系统中，Chromium内核浏览器的窗口默认带有左右各8px的边框/空白区域，这部分属于窗口框架的一部分，会被算进outerWidth，但完全不会被计入innerWidth。所以哪怕没有垂直滚动条，outerWidth也会比innerWidth固定大16px（8px×2）。

• 至于你提到的MDN文档说“无垂直滚动条时二者应相等”，这大概率是旧版文档的描述，或者是针对无窗口边框的特殊状态（比如浏览器全屏模式、手动设置无边框窗口）。你可以马上验证：按下F11进入全屏模式，此时outerWidth和innerWidth就会完全相等——因为全屏状态下窗口边框被彻底隐藏了。

另外补充一个细节：如果你在Chrome/Edge的设置里关闭“滚动时隐藏滚动条”的选项（搜索“滚动条”就能找到），当页面出现垂直滚动条时，outerWidth和innerWidth的差值就会变成16px加上滚动条的宽度（通常是17px，也就是总共33px）。这是因为关闭自动隐藏后，滚动条会占用视口空间，innerWidth会相应减少，差值自然变大。

总结下来，这个16px的差值就是Windows 10系统下Chromium浏览器窗口框架的固定宽度，完全符合浏览器的实际实现逻辑~

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