四个属性:
1:outerWidth 2:outerHeight 3:innerWidth 4:innerHeight
经最新版本的浏览器(Chrom IE Firefox Opera)测试,初步结果如下:
1:outerWidth与outerHeight
IE9+,Safari,Firefox :窗口本身加边框(指的是整个Brower);
Chrom,Opera: 页面视图容器(不包含边框) 。
2:innerWidth,innerHeight
IE9+,Safari,Firefox :可视区域;
Chrom,Opera: 可视区域 。
获取可视区域宽度和高度的跨浏览器兼容性方法:
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){ //IE兼容性问题
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth; //适合移动版IE 其他移
//浏览器中获取的是页面渲染后的实际大小
pageHeight = document.documentElement.clientHeight; //只有IE在标准模式下有用
} else{
pageWidth = document.body.clientWidth; //混杂模式下的IE
pageHeight = document.body.clientHeight;
}
}