JavaScript获取屏幕与窗口尺寸属性详解

获取窗口尺寸的原理与浏览器差异

主要涉及document对象中与窗口相关的若干属性，这些属性在网页开发中具有特定的功能和使用场景。

获取窗口尺寸时，不同浏览器采用的检测机制存在差异。在Netscape浏览器中，需直接调用window对象的属性；而在Internet Explorer环境下，则需深入document内部对body元素进行检测；在遵循DOM标准的浏览器中，获取窗口尺寸应关注根元素的尺寸，而非普通元素。

window对象的innerWidth属性用于返回当前窗口内部区域的宽度，而innerHeight属性则返回当前窗口内部区域的高度。

document对象的body属性对应HTML文档中的body标签；document对象的documentElement属性则指向HTML文档的根节点，即html标签。

document.body.clientHeight表示HTML文档所在窗口当前的高度；document.body.clientWidth表示HTML文档所在窗口的当前宽度。

JavaScript获取屏幕尺寸代码示例

以下是使用JavaScript获取屏幕相关尺寸信息的代码实现，变量s用于拼接显示信息：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 += " 网页被卷去的高："+ document.body.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 +" 像素/英寸";

上述内容即为JavaScript获取屏幕高度及相关尺寸信息的完整实现代码，供开发者参考使用。