JavaScript获取网页宽高与屏幕信息的方法汇总
本文汇总了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 高。以上就是本文的全部内容，希望对大家有所帮助。
js-cookie 安装与基础用法：set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目：制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？
2026-11-05 09:37:58