web前端-获取浏览器的宽度

IE9以及新的浏览器

window.innerWidth;
window.innerHeight;

符合 w3c 的

document.documentElement.clientWidth;
document.documentElement.clientHeight;

其他浏览器

document.body.clientWidth;
document.body.clientHeight;

兼容性写法

var sw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var sh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

兼容性写法的封装

function client(){
  if(window.innerWidth) {
    return  {
      width:window.innerWidth,
      height:window.innerHeight
    };
  } else if(document.compatMode == 'CSS1Compat') {
    return { 
      width: document.documentElement.clientWidth,
      height:document.documentElement.clientHeight
     };
  }
  return {
    width:document.body.clientWidth,
    height:document.body.clientHeight
  } 
}