JavaScript获取当前页面的用户区宽高问题

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

JavaScript获取当前页面的用户区宽高问题

上一篇:【Java面向对象基础(三)】面向对象思想


下一篇:移植 libuv 到 Visual C++ 6.0 并支持在 Windows XP 系统下编译