关于跨平台browser窗口大小的问题

 

最近看到一篇文章，是讲浏览器的。其中有一点是讲窗口大小的，我感觉很好，我这里也分析一下

 

窗口大小：

 

跨浏览器确定一个窗口的大小不是一个简单的事。IE9，FF，safari，Opera，Chrome均为此提供了4个属性：innerWidth，innerHeight，outerWidth，outerHeight

在IE9 safari和FF中，outerwidth和outerHeight 返回浏览器窗口本身的尺寸。但在Opera中，这两个属性的值却表示页面的视图容器的大小，也就是viewport的大小，很奇怪的是

innerWidth和innerHeight则表示该容器中页面视图区的大小。在Chrome这两点都返回同样的值，即viewport的大小。

 

那么确定窗口的大小就是一点很难的事情了。那么怎么办呢？

在IE，ff，Opera，Chrome，safari中，document.documentElement.clientWidth和docuemnt.documentElement.clientHeight中保存了视图页面的视口的消息。但在IE6中，

这些属性必须是标准模式下才有效，如果是混杂模式，就必须通过document.body.clientWidth和document.body.cilentHeight取得相同信息。而对于混杂模式下的Chrome，则无论通过

document.documentElement，还是document.body中的clientWidth和clientHeight属性，都可以取得视窗的大小。

 

 

下面提供跨平台的代码

 

 

var pageWidth  = window.innerWidth,
      pageHeight = window.innerHeight;
if(typeof pagewidth != "number"){
      if(document.compartMode == "CSS1Compat"){
             pageWidth = document.documentElement.clientWidth;
             pageHeight = document.docuemntElement.clientHeight;
      }else{
             pageWidth = document.body.clientWidht;
             pageHeight = document.body.clientHeight;
      }
}