标签：style java color 使用 文件 width
在网页的前端开发中，我们常常会涉及到自适应宽度，也就是说我们希望页面总是满宽显示。在这个过程中为了获得更好的用户体验和跨浏览器的兼容性，我们会在不同的用户区分辨率下实时载入不同的CSS文件，当然这就涉及到获取用户区的宽度（最主要是宽度）。
在javascript中，可以通过访问window.innerWidth，window.innerHeight和document.documentElement.clientWidth，document.documentElement.clientHeight以及document.body.clientWidth，document.body.clientHeight来得到用户区的宽高像素值，但是这3组属性在不同的浏览器和其版本中却不是我们想的那样子。
在IE5.5中：window.innerWidth，window.innerHeight的值是undefined；
document.documentElement.clientWidth，document.documentElement.clientHeight的值是0；
document.body.clientWidth，document.body.clientHeight的值是当前用户区的像素宽高。
在IE6中： window.innerWidth，window.innerHeight的值是undefined；
document.documentElement.clientWidth，document.documentElement.clientHeight的值是当前用户区的像素宽高；
document.body.clientWidth的值是当前用户区的像素宽，document.body.clientHeight的值是0。
在IE7、IE8中，和IE6中是一致的。
在IE9+的版本中：window.innerWidth，window.innerHeight和document.documentElement.clientWidth，document.documentElement.clientHeight的值是当前用户区的像素宽高；
document.body.clientWidth的值是当前用户区的像素宽，document.body.clientHeight的值是0。
在Firefox、Opera、Safari、Chrome中，与IE9+是一致的！
所以，我们如果要保证在IE5.5和Firefox、Opera、Safari、Chrome中能够准确地获取到用户区像素大小，那么可以使用如下代码：
var document=window.document;
var windowSizeWidth=(function(document){
if(document.documentElement.clientWidth===0){
return function(){
return document.body.clientWidth;
};
}else{
return function(){
return document.documentElement.clientWidth;
};
};
})(document);
var windowSizeHeight=(function(document){
if(document.documentElement.clientHeight===0){
return function(){
return document.body.clientHeight;
};
}else{
return function(){
return document.documentElement.clientHeight;
};
};
})(document);
上面的代码在上述浏览器中都可以完美运行，而且为了避免每次调用函数的时候都要做一堆重复的能力检测，而将其处理成在javascript载入时根据不同的浏览器实现不同的算法！
JavaScript获取当前页面的用户区宽高问题,布布扣,bubuko.com
标签：style java color 使用 文件 width
原文地址：http://www.cnblogs.com/reent/p/3841232.html
