JavaScript获取浏览器视口与页面尺寸的工具类封装

获取浏览器尺寸信息的必要性

当用户在长页面中点击按钮显示DIV层时，若未处理滚动位置，层可能显示在页面顶部而非用户当前可视区域，导致交互失效。因此，准确获取用户当前的浏览位置信息至关重要。在实现此功能前，先梳理JavaScript中可用于获取相关信息的工具：

常用DOM尺寸属性梳理

网页可见区域宽：document.body.clientWidth； 网页可见区域高：document.body.clientHeight； 网页可见区域宽（含边线和滚动条）：document.body.offsetWidth； 网页可见区域高（含边线）：document.body.offsetHeight； 网页正文全文宽：document.body.scrollWidth； 网页正文全文高：document.body.scrollHeight； 网页被卷去的高（Firefox）：document.body.scrollTop； 网页被卷去的高（IE）：document.documentElement.scrollTop； 网页被卷去的左：document.body.scrollLeft； 网页正文部分上：window.screenTop； 网页正文部分左：window.screenLeft； 屏幕分辨率的高：window.screen.height； 屏幕分辨率的宽：window.screen.width； 屏幕可用工作区高度：window.screen.availHeight； 屏幕可用工作区宽度：window.screen.availWidth； 屏幕颜色深度：window.screen.colorDepth + " 位彩色"； 屏幕设备像素密度：window.screen.deviceXDPI + " 像素/英寸"。

页面、窗口与视口的概念区分

这些资料多源自网络，面对大量相似且易混淆的概念，直接记忆极为困难。经过梳理与抽象，可将这些属性归纳为三个核心对象：页面（Page）、窗口（Window）和视口（ViewPort）。通过理解这三个对象的含义，可以更清晰地处理各类尺寸信息。

对这三个概念的具体解释如下：

页面（Page）：指网页内容的整体抽象。其高度通常大于浏览器可视高度，宽度通常小于或等于浏览器宽度。

浏览器窗口（Window）：指浏览器应用程序本身的抽象，包含菜单栏、工具栏、书签栏、状态栏及页面显示区等。因此，窗口高度必然大于或等于视口高度，宽度必然大于或等于视口宽度。

视口（ViewPort）：指浏览器中实际显示网页内容的区域。

JavaScript尺寸获取工具类实现

基于上述概念，我们可以编写一个小类库来获取这些“对象”的高度和宽度等信息。

 
var Browser = {
}; 
//页面
Browser.Page = (function () {
return {
scrollTop: function () {
return Math.max(document.body.scrollTop, document.documentElement.scrollTop);
}, 
scrollLeft: function () {
return Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
}, 
height: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.scrollHeight;
} else {
_height = document.body.scrollHeight;
} 
return _height;
}, 
width: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.scrollWidth;
} else {
_width = document.body.scrollWidth;
} 
return _width;
} 
}; 
})(); 
//窗口：
Browser.Window = (function () {
return {
outerHeight: function () {
var _hei = window.outerHeight;
if (typeof _hei != "number") {
_hei = Browser.ViewPort.outerHeight();
} 
return _hei;
}, 
outerWidth: function () {
var _wid = window.outerWidth;
if (typeof _wid != "number") {
_wid = Browser.ViewPort.outerWidth();
} 
return _wid;
}, 
innerHeight: function () {
var _hei = window.innerHeight;
if (typeof _hel != "number") {
_hei = Browser.ViewPort.innerHeight();
} 
return _hei;
}, 
innerWidth: function () {
var _wid = window.innerWidth;
if (typeof _wid != "number") {
_wid = Browser.ViewPort.innerWidth();
} 
return _wid;
}, 
height: function () {
return Browser.Window.innerHeight();
}, 
width: function () {
return Browser.Window.innerWidth();
} 
} 
})(); 
//视口:
Browser.ViewPort = (function () {
return {
innerHeight: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.clientHeight;
} else {
_height = document.body.clientHeight;
} 
return _height;
}, 
innerWidth: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.clientWidth;
} else {
_width = document.body.clientWidth;
} 
return _width;
}, 
outerHeight: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.offsetHeight;
} else {
_height = document.body.offsetHeight;
} 
return _height;
}, 
outerWidth: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.offsetWidth;
} else {
_width = document.body.offsetWidth;
} 
return _width;
}, 
width: function () {
return Browser.ViewPort.innerWidth();
}, 
height: function () {
return Browser.ViewPort.innerHeight();
} 
} 
})(); 

工具类使用说明与注意事项

做几点说明：

1、该库已支持获取多浏览器内部的视口宽度和高度信息。

2、在IE 9中，已与其他浏览器（Opera、Chrome、Firefox、Safari）一致，支持使用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四个属性获取浏览器窗口及视口的宽度和高度信息。但在IE9以前的IE版本中，这些属性不可用，因此在此类情况下，代码将视口和窗口的概念等同处理。

3、虽然window对象提供了宽度和高度信息，但这不一定是真正浏览器窗口的完整尺寸。因为某些浏览器返回的结果中可能不包含菜单栏、工具栏等的高度信息。

实例：使DIV保持在视口中心

实例演示：

在一个垂直内容过多的页面中，使一个DIV总能保持在视口的中心位置（非精确中心位置）：

具体实现代码如下：

 
window.onload = window.onresize = function () {
var top = Math.round(Browser.Page.scrollTop() + (Browser.ViewPort.height() / 2) - (parseInt(document.getElementById("divCenter").style.height) / 2));
var left = Math.round(Browser.Page.scrollLeft() + (Browser.ViewPort.width() / 2) - (parseInt(document.getElementById("divCenter").style.width) / 2));
document.getElementById("divCenter").style.top = top + "px";
document.getElementById("divCenter").style.left = left + "px";
} 

测试时，可以通过改变窗口大小来验证效果。

时间不早了，晚安！

源代码下载查看