在网页的前端开发中，我们常常会涉及到自适应宽度，也就是说我们希望页面总是满宽显示。在这个过程中为了获得更好的用户体验和跨浏览器的兼容性，我们会在不同的用户区分辨率下实时载入不同的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载入时根据不同的浏览器实现不同的算法！