跨瀏覽器確定一個窗口的大小不是一件簡單的事。Firefox.Safari.Opera和Chrome均為此提供了4個屬性：innerWidth、innerHeight、 outerWidth和outerHeight。在Safari和Firefox中，outerWidth和outerHeight返回瀏覽器窗口本身的尺寸(無論是從最外層的window對象還是從某個框架訪問)。在Opera中，這兩個屬性的值表示頁面視圖容器①的大小。而innerWidth和innerHeight則表示該容器中頁面視圖區的大小(減去邊框寬度)。在Chrome中，outerWidth.outerHeight與innerWidth，innerHeight返回相同的值，即視口(viewport)大小而非瀏覽器窗口大小。

IE沒有提供取得當前瀏覽器窗口尺寸的屬性;不過，它通過DOM提供了頁面可見區域的相關信息。

在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和

document.documentElement.clientHeight中保存了頁面視口的信息。在IE6中，這些屬性必須在標準模式下才有效;如果是混雜模式，就必須通過do crunent.body.clientWidth和document.body.clientHeight取得相同信息。而對于混雜模式下的Chrome，則無論通過docurnent.documentElement還是document.body中的clientWidth和clientHeight屬性，都可以取得視口的大小。

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

var pageWidth=window.innerWidth,

pageHeight=window.innerHeight;

if ( typeof pageWidth !="number")t

if ( document.compatMode== "CSSICompat"){

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的值。

另外，使用resizeTo()和resizeBy()方法可以調整瀏覽器窗口的大小。這兩個方法都接收兩個參數，其中resizeTo()接收瀏覽器窗口的新寬度和新高度，而resizeBy()接收新窗口與原窗口的寬度和高度之差。來看下面的例子：

//調整到100×100

window.resizeTo(100,100);

//調整到200 x150

window.resizeBy(IOO,50);

//調整到300x300

window.resizeTo(300,300);

南昌網絡公司工程師提醒廣大站長需要注意的是，這兩個方法與移動窗口位置的方法類似，也有可能被瀏覽器禁用;而且，在Opera和IE 7(及更高版本)中默認就是禁用的。另外，這兩個方法同樣不適用于框架，而只能對最外層的 window對象使用。

①這里所謂的“頁面視圖容器”指的是Opera中單個標簽頁對應的瀏覽器窗口。

本文僅限內部技術人員學習交流,不得作于其他商業用途.文章出自:南昌網站建設公司-百恒網絡 http://m.51yjwy.com 如轉載請注明出處!