获取浏览器可视屏幕宽度
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;