浏览器中各种 width 的区别

同学，你好。

与窗口相关的尺寸有视口宽度clientWidth、浏览器外宽outterWidth、浏览器内宽innerHeight，视口高度clientHeight、浏览器外高outterHeight、浏览器内高innerHeight， 这几个尺寸会因浏览器的不同略有差异。

PC浏览器下

标准模式下 document.documentElement.clientWidth 和 document.body.clientWidth 代表视口宽度，滚动条也包含在内。

window.outterWidth 代表浏览器窗口的大小，包含顶部的标签栏、地址栏、书签栏等，另外四周还增加了几像素的阴影也包含在内。

window.innerWidth 代表浏览器主体内容区域的宽度，滚动条包含在内，通常与clientWidth视口尺寸一样。

上述三项测试在Chrome、IE11、Edge、Firefox、Safari 中测试通过。

移动端浏览器上

clientWidth、outterWidth、innerHeight 的值均一致，safari 的 outterWidth 和 outerHeight 均为0。而且 clientWidth、outterWidth、innerHeight 三个值均会随着浏览器地址栏和工具栏的显示或隐藏而发生变化，也就是说浏览器大小、视口是一起发生变化的。

祝学习愉快！