獲取window窗口大小

窗口大小

　　跨瀏覽器確定一個窗口的大小不是一件簡單的事。IE9+、Firefox、Safari、Opera和Chrome均為此提供了4個屬性：innerWidth、innerHeight、outerWidth和outerHeight。在IE9+、Safari和Firefox中，outerWidth和outerHeight返回瀏覽器窗口本身的尺寸（無論是從最外層的window對象還是從某個框架訪問）。在Opera中，這兩個屬性的值表示頁面視圖容器的大小。而innerWidth和innerHeight則表示該容器中頁面視圖區的大小（減去邊框寬度）。在Chrome中，outerWidth、outerHeight 與innerWidth、innerHeight返回相同的值，即視口（viewport）大小而非瀏覽器窗口大小。IE8及更早版本沒有提供取得當前瀏覽器窗口尺寸的屬性；不過，它通過DOM提供了頁面可見區域的相關信息。

　　在IE、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面視口的信息。在IE6中，這些屬性必須在標准模式下才有效；如果是混雜模式，就必須通過document.body.clientWidth和document.body.clientHeight取得相同信息。而對於混雜模式下的Chrome，則無論通過document.documentEle-ment還是document.body中的clientWidth和clientHeight屬性，都可以取得視口的大小。 

雖然最終無法確定瀏覽器窗口本身的大小，但卻可以取得頁面視口的大小，如下所示。

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

if (typeof pageWidth != "number"){ 
    //標准模式
    if (document.compatMode == "CSS1Compat"){ 
        pageWidth = document.documentElement.clientWidth; 
        pageHeight = document.documentElement.clientHeight; 
    //怪異模式
    } else { 
        pageWidth = document.body.clientWidth; 
        pageHeight = document.body.clientHeight; 
    } 
} 

　　PS: 對於移動設備，window.innerWidth和window.innerHeight保存着可見視口，也就是屏幕上可見頁面區域的大小。移動IE 瀏覽器不支持這些屬性，但通過document.documentElement.client-Width和document.documentElement.clientHeihgt提供了相同的信息。隨着頁面的縮放，這些值也會相應變化。