关于跨平台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属性,都可以取得视窗的大小。

 

 

下面提供跨平台的代码

 

 

Js代码 
  1. var pageWidth  = window.innerWidth,  
  2.       pageHeight = window.innerHeight;  
  3. if(typeof pagewidth != "number"){  
  4.       if(document.compartMode == "CSS1Compat"){  
  5.              pageWidth = document.documentElement.clientWidth;  
  6.              pageHeight = document.docuemntElement.clientHeight;  
  7.       }else{  
  8.              pageWidth = document.body.clientWidht;  
  9.              pageHeight = document.body.clientHeight;  
  10.       }  
  11. }  
posted @ 2012-05-30 08:37  Jake.Xu  阅读(167)  评论(0编辑  收藏