浏览器可视区大小简说（clientWidth,innerWidth）

Posted 2020-11-08 xxcat

　　网络上获取窗口文档显示区的宽高有以下三种方式：

　　1:window.innerHeight/innerWidth

　　　第一种方式获取的是可视区的宽高，包括了滚动条的宽度

　　　ps:IE 8 及更早 IE版本不支持这两个属性。

　　2:document.body.clientHeight/clientWidth

　　　第二种方式获取的是 body对象宽度

　　3:document.documentElement.clientHeight/clientWidth

　　　第三种方式获取的是可视区的宽高，不包括了滚动条的宽度

　　兼容写法如下

var width = window.innerWidth,
height = window.innerHeight;
 
if (typeof width != ‘number‘) {  //如果类型不为number,表示该浏览器不支持innerWidth属性
 
 if (document.compatMode == ‘CSS1Compat‘) {   //CSS1Compat：判断是否为标准兼容模式。
 
  width = document.documentElement.clientWidth;
 
  height = document.docuementElement.clientHeight;
 
 } else { //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时，并未遵守W3C标准)
 
  width = document.body.clientWidth;   //网页可见区域宽
 
  height = document.body.clientHeight;   //网页可见区域高
}
  alert(width);
  alert(height);