js如何获取浏览器窗口大小和网页内容尺寸

什么是网页的大小和浏览器窗口

• 网页大小就是一张网页的全部面积，通常情况，网页大小由内容和CSS样式表决定。
• 浏览器窗口大小，是指浏览器窗口中看到的那部分网页面积，又叫视口（viewport）。

获取浏览器窗口大小

可以通过windows对象的 innerHeight 属性获取。
也可以通过元素的 clientHeight 属性获取。网页上每个元素都有 clientHeight 和 clientWidth 属性。这两个属性指元素的内容部分加上 padding 的大小，不包括 border 和滚动条的大小。
大部分情况下 document.documentElement 的大小可以代表浏览器窗口的大小，但是在 IE6 的 quirks 模式中，document.body 才返回正确的值。

如何获取浏览器窗口高度

// 浏览器内部界面的高度，即内容显示区域的高度，F12调试工具的占位会实时改变该值
window.innerHeight

// 浏览器外部界面即窗体的高度，调试工具的占位不会影响该值
window.outerHeight

// 表示 HTML 文档所在窗口的可视区域高度，效果同 window.innerHeight
document.documentElement.clientHeight

// ie6 quirks 模式下表示 body 的可视区域高度，注意：body与浏览器之间有个默认的 margin
document.body.clientHeight

与高度对应的，还有宽度：window.innerWidth 、window.outerWidth、window.outerWidth、document.documentElement.clientWidth、 document.body.clientWidth

说明：window.innerHeight ／ innderWidth 在ie8 及以下不支持，需要通过
document.documentElement.clientHeight ／ clientWidth 来替代。所以兼容的写法为：
window.innerHeight || document.documentElement.clientHeight
window.innderWidth || document.documentElement.clientWidth

获取网页内容大小

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

document.documentElement.offsetWidth || document.body.offSetWidth
document.documentElement.offsetHeight || document.body.offSetHeight

番外

通常获取浏览器界面的宽高，是有自适应布局的需要，常常需要跟如下方法配合使用：

1. window 的尺寸变化事件

// js
window.onresize()

// jquery
$(window).resize()

2. window 的滚动事件

// js
window.onscroll()

// jquery
$(window).scroll()