2021-02-05 BOM浏览器窗口大小记录

IE9+、Firefox、Safari、Opera和Chrome均为此提供了4个属性：
innerWidth、innerHeight、outerWidth、outerHeight。

IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性

在IE、Firfox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.ClientHeight中保存了页面视口的信息。在IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome，则无论通过document.documentElement还是document.body中的clientWidth和clientHeight属性，都可以取得视口的大小。

虽然最终无法确定浏览器窗口的本身的大小，但却可以取得页面视口的大小。

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if(typeof pageWidth !="number"){
  pageWidth = document.documentElement.clientWidth;
  pageHeight = document.documentElement.clientHeight;
}else{
  pageWidth = document.body.clientWidth;
  pageHeight = document.body.clientHeight;
}

在以上代码中，我们首先将window,innerWidth和window,innerHeight 的值分别赋给了pagewidth和pageHeight。然后检查pageWidth中保存的是不是一个数值；如果不是，则通过检查document.compatMode来确定页面是否处于标准模式。如果是，则分别使用 document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则，就使用document.body.clientWidth和document.body.clientHeight的值