在寫頁面的時候你肯定遇到過各種頁面寬高相關的東西，比如：clientHeight、offsetHeight、scrollHeight、availHeight、style.height、innerHeight、outerHeight、scree.height。。。是不是看着就有點兒暈了。下面，就讓我來為你們簡單介紹下這些小寶寶吧，只要認識了就是好朋友，什么都好說^_^。時間和能力有限，錯誤之處還請各位英雄不吝賜教！這里先謝過了♪(･ω･)ﾉ。
（本文僅從名詞解釋角度，說明各個詞語的具體含義是什么，不做瀏覽器兼容等方面的說明，因為比較復雜，后面有時間，專門寫內容說明。所有代碼只在chrome瀏覽器中運行過。）
先放幾張圖，對瀏覽器的概貌有個大致的了解：
第一張：原始的整個屏幕的截圖，也就是大多數用戶看到的瀏覽器的樣子。
第二張：我用不同的線條標出了各種區域，這些區域將是本文要討論的區域們。下面先簡單解釋下：
大紅色：客戶端的整個屏幕
黃色：瀏覽器窗口
綠色：網頁可展示區加滾動條
淺綠色：不含滾動條的網頁區域
第三張，這幅圖包含了工具欄：
品紅色：整個屏幕
棕色：不含工具條和滾動條的網頁內容區域
一，瀏覽器可視區域的寬高（innerHeight和outerHeight）：
瀏覽器就是向我們展示內容的整個窗口，它是window對象，會隨着我們調整瀏覽器的大小為最大化和最小化之間的任意值二變化，包括標題欄，標簽欄，以及滾動條等等。
inner前綴寬高只包含內容展示區，不包括工具條等其他和內容展示無關的東西。
outer前綴的寬高包括工具條等其他非內容展示區的東西。
具體如下圖所示：
我們在寫頁面時，好像一般不會用到outter寬高相關的東西。好像通常會用到inner寬高。下面給出獲取代碼：
//網頁窗口內包含滾動條的寬度 console.log("window.innerWidth：" + window.innerWidth); //網頁窗口內，包含滾動條的高度 console.log("window.innerHeight：" + window.innerHeight); //整個瀏覽器窗口的寬度 console.log("window.outerWidth：" + window.outerWidth); //整個瀏覽器窗口的高度 console.log("window.outerHeight：" + window.outerHeight);
二，網頁可用工作區的寬高和可視區域的寬高：
可用工作區，可用理解為第一部分中，inner寬高所包括的內容，但是不應該包括滾動條。就是，我們展示內容可以用使用的區域。
請注意，無論是client前綴還是offset前綴，取值時都是以body為基准的，不包括body的margin值。client前綴不包括body邊框，offset包括body邊框。一般情況下，我們不會給body設置邊框和margin，但是一定注意，很多瀏覽器會自動給body設置margin，比如chrome就默認設置8個像素的margin。
//body元素不包括margin和border的實際寬度，但是一般瀏覽器會自動給body添加margin值。 console.log("document.body.clientWidth：" + document.body.clientWidth); //body元素不包括margin和border的實際高度，包括可視區之外的內容 console.log("document.body.clientHeight：" + document.body.clientHeight); //同document.body.clientWidth,但是包括body的邊框 console.log("document.body.offsetWidth：" + document.body.offsetWidth); //同document.body.offsetWidth，但是包括body的邊框 console.log("document.body.offsetHeight：" + document.body.offsetHeight);
三，網頁正文的寬高（包括滾動區域之外的內容）：
console.log("window.screenLeft：" + window.screenLeft);
//網頁包括滾動條之外區域的寬
console.log("document.body.scrollWidth：" + document.body.scrollWidth);
//網頁包括滾動條之外區域的高
四，屏幕分辨率的寬高，也就是屏幕實際的寬高：
//屏幕分辨率的高度，也即是實際高度 console.log("window.screen.height：" + window.screen.height); //屏幕分辨率的寬度，也即是實際高寬 console.log("window.screen.width：" + window.screen.width);
五，屏幕可用區域的寬高（不包括任務欄）：
//整個客戶端屏幕可用區的高度，不包括底部任務欄 console.log("window.screen.availHeight：" + window.screen.availHeight); //整個客戶端屏幕可用區的寬度 console.log("window.screen.availWidth：" + window.screen.availWidth);
本文所有測試代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>各種寬高小結</title> </head> <style> body{ border: 6px solid aqua; } ul li{ list-style: none; padding: 40px; height: 80px; width: 100%; } </style> <body> body設置了6像素的藍色邊框哦！ <div> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <script> //網頁窗口內包含滾動條的寬度 console.log("window.innerWidth：" + window.innerWidth); //網頁窗口內，包含滾動條的高度 console.log("window.innerHeight：" + window.innerHeight); //整個瀏覽器窗口的寬度 console.log("window.outerWidth：" + window.outerWidth); //整個瀏覽器窗口的高度 console.log("window.outerHeight：" + window.outerHeight); //body元素不包括margin和border的實際寬度，但是一般瀏覽器會自動給body添加margin值。 console.log("document.body.clientWidth：" + document.body.clientWidth); //body元素不包括margin和border的實際高度，包括可視區之外的內容 console.log("document.body.clientHeight：" + document.body.clientHeight); //同document.body.clientWidth,但是包括body的邊框 console.log("document.body.offsetWidth：" + document.body.offsetWidth); //同document.body.offsetWidth，但是包括body的邊框 console.log("document.body.offsetHeight：" + document.body.offsetHeight); //整個客戶端屏幕可用區的高度，不包括底部任務欄 console.log("window.screen.availHeight：" + window.screen.availHeight); //整個客戶端屏幕可用區的寬度 console.log("window.screen.availWidth：" + window.screen.availWidth); //屏幕分辨率的高度，也即是實際高度 console.log("window.screen.height：" + window.screen.height); //屏幕分辨率的寬度，也即是實際高寬 console.log("window.screen.width：" + window.screen.width); //網頁包括滾動條之外區域的寬 console.log("document.body.scrollWidth：" + document.body.scrollWidth); //網頁包括滾動條之外區域的高 console.log("document.body.scrollHeight：" + document.body.scrollHeight); //瀏覽器距離客戶端屏幕頂部邊緣的距離 console.log("window.screenTop：" + window.screenTop); //瀏覽器距離客戶端屏幕左邊緣的距離 console.log("window.screenLeft：" + window.screenLeft); // console.log("document.body.scrollTop：" + document.body.scrollTop); // console.log("document.body.scrollLeft：" + document.body.scrollLeft); </script> </body> </html>