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

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

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

获取浏览器窗口大小

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

如何获取浏览器窗口高度

1
2
3
4
5
6
7
8
9
10
11
// 浏览器内部界面的高度,即内容显示区域的高度,F12调试工具的占位会实时改变该值
window.innerHeight

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

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

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

与高度对应的,还有宽度:window.innerWidthwindow.outerWidthwindow.outerWidthdocument.documentElement.clientWidthdocument.body.clientWidth

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

获取网页内容大小

1
2
3
4
5
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 的尺寸变化事件

1
2
3
4
5
// js
window.onresize()

// jquery
$(window).resize()

2. window 的滚动事件

1
2
3
4
5
// js
window.onscroll()

// jquery
$(window).scroll()