获取浏览器可视屏幕宽度

1.各浏览器

// 360
innerWidth=outerWidth    //窗口宽度
innerHeight=outerHeight  //窗口高度  (仅白色body区域,不包顶部和尾部状态栏)

// chrom
innerWidth=outerWidth    //窗口宽度
innerHeight!=outerHeight  //窗口高度  
innerHeight 是白色body区域
outerHeight 是body+顶部地址栏等的高度

//ie8
alert(innerWidth)  // ie 无法识别该属性,报错,应写成window.innerWidth; 但也无法得出宽度,返回undefined


//Firefox

innerWinth=outerWinth  //基本相等,但有10几像素误差 ?
innerHeight  //body的高度
outerHeight  //body +顶部地址栏等高度+状态栏, 有几像素误差 ?

2.获取body的宽、高方法

var width = window.innerWidth; //这里要加window,因为IE 会无效;window.innerWidth在ie浏览器返回undefined
var height = window.innerHeight;

if (typeof width != 'number') { //如果是IE,就使用document
    if (document.compatMode == 'CSS1Compat') {  //标准模式
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    } else {
        width = document.body.clientWidth;  //非标准模式使用body
        height = document.body.clientHeight;
    }
}
alert(width);  
alert(height);      
//是ie则进入if语句,再判断是标准还是非标准  ,其他浏览器直接根据变量得出宽高

 3.窗口的位置

//ie支持,火狐不支持:
alert(screenLeft); 
alert(screenTop);
alert(typeof screenLeft); //ie支持,返回number;不支持的返回undefined

//火狐支持,ie不支持:
alert(screenX);
alert(screenY);


//跨浏览器兼容:
var leftX=(typeof screenLeft=="number")?screenLeft:screenX;
var topY=(typeof screenTop=="number")?screenTop:screenY;

  

posted @ 2017-03-21 16:51  Hailinlu  阅读(341)  评论(0编辑  收藏  举报