获取浏览器尺寸常用的几个属性

浏览器视口尺寸、文档尺寸和滚动坐标是三个常用的值。为了获取这三个值，现在可以搜索到的代码，最为著名和常用的，是那个40行左右的getWindowInfo函数。从这个函数一开篇里的pageXOffset就可知道，这个函数相当有年头了。其实我在2005年前后就曾经用过它。

基于有限开发的原则，我决定抛弃ns浏览器，使用document.body/document.documentElement来获取各项参数，即clientWidth/Height、offsetWidth/Height、scrollWidth/Height。这里需要注意的是ie和ff对offsetWidth/Height解释的不同。仅就offsetHeight来讲，在ie下，该值等于clientHeight + 4；在ff下，该值等于scrollHeight。其他的，client相关尺寸为视口大小，scroll相关尺寸为文档大小。

另外相关的两个对象是window和html节点。

window.innerWidth/Height是ff下的特有属性，其值与clientWidth/Height相同。

html.offsetWidth/Height的值与offsetWidth/Height的值相同，即ie下为clientHeight + 4，在ff下为scrollWidth/Height。

获取滚动坐标的办法比较简单：html.scrollLeft/Top。

下面是muse库在加载时初始化的一段ui库的代码：

(function(){	//init browser function
	//ui
	var _obj_ = document.documentElement || document.body, _html_ = muse.selector.html();
	muse.ui = {
		clientWidth : function(){ return _obj_.clientWidth; },
		clientHeight : function(){ return  _obj_.clientHeight; },
		//clientWidth : typeof window.innerWidth == 'number' ? function(){ return window.innerWidth; } : function(){ return _obj_.clientWidth; },
		//clientHeight : typeof window.innerHeight == 'number' ? function(){ return window.innerHeight; } : function(){ return  _obj_.clientHeight; },
		contentWidth : function(){ return _obj_.scrollWidth; },
		contentHeight : function(){ return _obj_.scrollHeight; },
		scrollLeft : function(){ return _html_.scrollLeft; },
		scrollTop : function(){ return _html_.scrollTop; }
	};
})();

转载于:https://www.cnblogs.com/muse/articles/1705939.html