本文汇总了JavaScript中获取网页可见区域、总宽高、滚动位置及屏幕分辨率的各种属性。详细对比了document.body与document.documentElement在不同浏览器（IE、Firefox、Opera、Chrome）下的表现差异，并解释了DOCTYPE声明对获取结果的影响，帮助开发者准确获取页面尺寸信息。
获取网页可见区域与总尺寸
获取网页可见区域尺寸时，可使用 document.body.clientWidth 获取宽度，使用 document.body.clientHeight 获取高度。
若需包含边线和滚动条的宽度，可使用 document.body.offsetWidth 获取网页可见区域宽；对应的高度则通过 document.body.offsetHeight 获取。需要注意的是，在 Firefox 和 Chrome 浏览器中，该属性返回的是整个页面的高度，而在 Internet Explorer 和 Opera 中则表现正常。
获取网页正文的总尺寸时，使用 document.body.scrollWidth 获取总宽度，使用 document.body.scrollHeight 获取总高度。
当页面存在滚动条时，document.body.scrollTop 用于获取向下拖动滚动条后上方未显示部分的高度；document.body.scrollLeft 则用于获取向左滚动后左侧未显示部分的宽度。
获取浏览器窗口与屏幕信息
获取浏览器窗口内部高度，可使用 window.innerHeight 属性。
获取浏览器窗口内部宽度，可使用 window.innerWidth 属性。
获取网页正文部分相对于屏幕的位置时，window.screenTop 表示网页文档最上方距离屏幕最上方的距离，window.screenLeft 表示网页文档最左方距离屏幕最左方的距离。但需注意，Firefox 不支持这两个属性，且 Chrome、IE 和 Opera 的表现各异，建议谨慎使用。
获取屏幕分辨率尺寸时，window.screen.height 用于获取高度，window.screen.width 用于获取宽度。
获取可用工作区尺寸时，window.screen.availHeight 表示整个屏幕高度但不包括下方任务栏，window.screen.availWidth 表示整个屏幕的宽度。
获取屏幕色彩深度可使用 window.screen.colorDepth，常见值为 16 位或 32 位等；获取屏幕像素密度可使用 window.screen.deviceXDPI，该属性仅 Internet Explorer 支持，其他浏览器不支持。
不同浏览器下的兼容性差异
以下是 JavaScript 获取页面宽高的具体方法汇总。
<script>
function getInfo()
{
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth;
s += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在本地测试环境中，上述部分方法在 Internet Explorer、Firefox 和 Opera 浏览器中均可正常使用。
document.body.clientWidth
document.body.clientHeight
在本地项目中，该方法简单便捷。但在公司实际项目环境中，Opera 浏览器仍使用特定的获取方式。
document.body.clientWidth
document.body.clientHeight
然而，在 Internet Explorer 和 Firefox 浏览器中，则需要采用不同的获取方式。
document.documentElement.clientWidth
document.documentElement.clientHeight
DOCTYPE声明对获取结果的影响
造成这种差异的主要原因是 W3C 标准的影响。
如果在页面头部添加如下DOCTYPE声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，则会影响获取结果。
在 Internet Explorer 浏览器中，当定义了上述标准时，获取方式如下。
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在 Firefox 浏览器中，当定义了上述标准时，获取方式如下。
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在 Opera 浏览器中，当定义了上述标准时，获取方式如下。
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）如果页面未定义 W3C 标准，则各浏览器的表现如下。
在 Internet Explorer 浏览器中，未定义标准时的表现如下。
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
在 Firefox 浏览器中，未定义标准时的表现如下。
具体代码如下所示。
document.documentElement.clientWidth 表示页面对象宽度，即 BODY 对象宽度加上 Margin 宽。
document.documentElement.clientHeight 表示页面对象高度，即 BODY 对象高度加上 Margin 高。在 Opera 浏览器中，未定义标准时的表现如下。
具体代码如下所示。
document.documentElement.clientWidth 表示页面对象宽度，即 BODY 对象宽度加上 Margin 宽。
document.documentElement.clientHeight 表示页面对象高度，即 BODY 对象高度加上 Margin 高。以上就是本文的全部内容，希望对大家有所帮助。