Chrome中window.innerWidth返回值与开发者控制台显示宽度不一致问题问询

• Chrome开发者工具左上角显示的页面宽度，是页面CSS布局可用的视口宽度，仅计算页面内容可占据的空间，不包含垂直滚动条的宽度。
• 而window.innerWidth返回的是浏览器视口的总宽度，会把垂直滚动条占据的宽度算入在内，两者会有10~20px的常规差值。
• 如果差值较大（如示例中接近250px的差值），通常是两个额外因素导致：要么是开启了Chrome的设备仿真调试模式，左上角显示的是你手动设置的模拟设备宽度，window.innerWidth返回的是当前浏览器窗口的实际逻辑宽度；要么是操作系统/Chrome页面设置了非100%的缩放比例，window.innerWidth会跟随缩放做换算，而左上角显示的是未换算的原始CSS像素宽度。

直接在控制台执行以下命令即可拿到和左上角数值完全匹配的宽度：
document.documentElement.clientWidth

如果是兼容旧的怪异模式页面，可使用：
document.body.clientWidth

对应的高度获取命令为document.documentElement.clientHeight。

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