JS獲取瀏覽器視窗大小

獲取 <html> 標籤的 clientWidth 和 clientHeight 屬性，就可以知道瀏覽器視窗的可視寬度和高度，而 <html> 標籤在指令碼中表示為 document.documentElement。可以這樣設計：

var w = document.documentElement.clientWidth;  //返回值不包含捲軸的寬度
var h = document.documentElement.clientHeight;  //返回值不包含捲軸的寬度

在怪異模式下，body 是最頂層的可視元素，而 html 元素保持隱藏，所以只有通過 <body> 標籤的 clientWidth 和 clientHeight 屬性才可以知道瀏覽器視窗的可視寬度和高度，而 <body> 標籤在指令碼中表示為 document.body。可以這樣設計：

var w = document.body.clientWidth; 
var h = document.body.clientHeight;

把上面兩種方法相容起來，設計程式碼如下：

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

如果瀏覽器支援 documentElement，則使用 documentElement 物件讀取；如果該物件不存在，則使用 body 物件讀取。

如果視窗包含內容超出了視窗可視區域，則應該使用 scrollWidth 和 scrollHeight 屬性來獲取視窗的實際寬度和高度。

對於 document.documentElement 和 document.body 來說，不同瀏覽器對它們的支援略有差異。例如：

<body style="border : solid 2px blue; margin : 0; padding : 0">
    <div style="width : 2000px; height : 1000px; border : solid 1px red;">
    </div>
</body>
<script>
    var wb = document.body.scrollWidth;
    var hb = document.body.scrollHeight;
    var wh = document.documentElement.scrollWidth;
    var hh = document.documentElement.scrollHeight;
</script>

不同的瀏覽器使用 documentElement 物件獲取瀏覽器視窗的實際尺寸是一致的，但是使用 body 物件來獲取對應尺寸就會存在解析差異，在實際設計中應該考慮這個問題。