浏览器中常见尺寸的差异

窗口相关尺寸

与窗口相关的尺寸有视口宽度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 三个值均会随着浏览器地址栏和工具栏的显示或隐藏而发生变化，也就是说浏览器大小、视口是一起发生变化的。

元素相关尺寸

元素大小

offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（含padding）、（可见的）水平滚动条高度、 上边框高度和下边框高度。这个高度可以用来检测元素的可见区域。

offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（含padding）、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。这个高度可以用来检测元素的可见区域。

offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。

offset.jpg

客户区大小

clientWidth: 指的是元素内容及其内边距所占据的空间大小，不包含border，滚动条空间不计算在内。

注意：滚动条一般是位于border的内边缘，盖住了padding，但是不占用padding的空间。

client.jpg

滚动大小，得到的值不带单位

scrollHeight: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总高度。

scrollWidth: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总宽度。

scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop: 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

带有垂直滚动条的页面总高度：document.documentElement.scrollHeight，如果想要获取文档高度，需要找到 scrollHeight 和 clientHeight 中的最大值。

scroll.jpg

参考文献：
《高级语言程序设计 第三版》