在web前端编程中，我们有的时候需要获取浏览器有关窗口的大小和位置，尤其是浏览器窗口可视区域的大小和位置，更是我们经常要用到的。
一般的，在获取浏览器窗口的大小和位置时，有以下几个属性可以使用：
1) window.innerHeight
2) window.innerWidth
3) window.pageXOffset
4) window.pageYOffset
5) document.documentElement.clientHeight
6) document.documentElement.clientWidth
7) document.documentElement.scrollLeft
8) document.documentElement.scrollTop
9) document.body.clientHeight
10) document.body.clientWidth
11) document.body.scrollLeft
12) document.body.scrollTop
在不同的浏览器中，以上12个属性所代表的意义也是不一样的。特别需要注意的是，当使用或者不使用<!DOCTYPE>声明显示一个文档的时候，以上12个属性的意义也会发生变化。
为彻底搞清楚它们的含义，笔者在IE6/IE7/IE8/IE9/FireFox/Chrome/Safari下进行了测试，总结如下表所示：
| 浏览器
属性 | Firefox/Chrome/Safari (带<!DOCTYPE>声明) | Firefox/Chrome/Safari (不带<!DOCTYPE>声明) | IE 6/7/8/9 (带<!DOCTYPE>声明) | IE 6/7/8/9 (不带<!DOCTYPE>声明) |
| window.innerWidth/innerHeight | 窗口显示区（可视区域）的宽度和高度，包括滚动条区域 | 窗口显示区（可视区域）的宽度和高度，包括滚动条区域 | IE 6/7/8 Undefined
IE 9 同Firefox | IE 6/7/8 Undefined
IE 9 同Firefox |
| document.documentElement.clientWidth/clientHeight | 窗口显示区（可视区域）的宽度和高度，不包括滚动条区域 | <html>元素的宽度和高度（注意包括了不可见的区域） | IE 6/7/8/9 窗口显示区（可视区域）的宽度和高度，不包括滚动条区域 | IE 6/7/8 总为0
IE 9 窗口显示区（可视区域）的宽度和高度，不包括滚动条区域 |
| document.body.clientWidth/clientHeight | <body>元素的宽度和高度（注意，包括了不可见的区域） | 窗口显示区（可视区域）的宽度和高度，不包括滚动条区域 | <body>元素的宽度和高度（注意，它包括了不可见的区域） | IE 6/7/8 窗口显示区（可视区域）的宽度和高度，不包括滚动条区域）
IE 9 <body>元素的宽度和高度（注意，它包括了不可见的区域） |
| window.pageXOffset/pageYOffset | 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离 | 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离 | IE 6/7/8 Undefined
IE 9 同Firefox | IE 6/7/8 Undefined
IE 9 同Firefox |
| document.documentElement.scrollTop/scrollLeft | Firefox： 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离，同window.pageXOffset/pageYOffset
Chrome/Safari： 总为0 | 总为0 | IE 6/7/8/9 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离 | IE 6/7/8 总为0
IE 9 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离 |
| document.body.scrollTop/scrollLeft | FireFox： 总为0
Chrome/Safari： 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离，同window.pageXOffset/pageYOffset | 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离，同window.pageXOffset/pageYOffset
| 总为0 | IE 6/7/8 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离
IE 9 当前页面相对于窗口显示区左上角的 X /Y位置，即水平/垂直滚动条已滚动的距离 |
特别指出的是，在IE 9中，无论是否使用<!DOCTYPE>声明显示一个文档，document.documentElement和document.body中的相关属性的意义总是相同的。这点与IE 6/7/8表现不一样。
综合上表，以下是获取浏览器窗口可视区域（不包括滚动条）和滚动条位置的代码，它兼容主流浏览器（IE/Firefox/Chrome/Safari）：
// 获取浏览器窗口的可视区域的宽度function getViewPortWidth() { return document.documentElement.clientWidth || document.body.clientWidth;}// 获取浏览器窗口的可视区域的高度function getViewPortHeight() { return document.documentElement.clientHeight || document.body.clientHeight;}// 获取浏览器窗口水平滚动条的位置function getScrollLeft() { return document.documentElement.scrollLeft || document.body.scrollLeft;}// 获取浏览器窗口垂直滚动条的位置function getScrollTop() { return document.documentElement.scrollTop || document.body.scrollTop;}