获取浏览器可视屏幕宽度

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;

　　

转载于:https://www.cnblogs.com/luhailin/p/6595224.html