前端獲取各類寬高

圖片僅供參考，因爲部分屬性各個瀏覽器解釋不一致，有些錯誤，等研究透後再修改。

1. 獲取瀏覽器寬高

• window.innerHeight：
  瀏覽器內頁面可用高度；此高度包含了水平滾動條的高度(若存在)。可表示爲瀏覽器當前高度去除瀏覽器邊框、工具條後的高度。
• window.outerHeight：
  瀏覽器高度。
• window.innerWidth：
  瀏覽器內頁面可用寬度；此寬度包含了垂直滾動條的寬度(若存在)。可表示爲瀏覽器當前寬度去除瀏覽器邊框後的寬度。
• window.outerWidth：
  瀏覽器寬度。
• 工具欄高度：
  包含了地址欄、書籤欄、瀏覽器邊框等範圍。如：高度，可經過瀏覽器高度 - 頁面可用高度得出，即：window.outerHeight - window.innerHeight。

2. 獲取頁面寬高

• document.body.offsetHeight/document.body.clientHeight/document.documentElement.offsetHeight：
  body/html總高度。
• document.documentElement.clientHeight：
  html展現的高度；表示body在瀏覽器內顯示的區域高度。
• document.body.offsetWidthdocument.body.clientWidth:
  body總寬度。
• document.documentElement.offsetWidthdocument.documentElement.clientWidth
  html展現的寬度；表示html在瀏覽器內顯示的區域寬度。
• 滾動條高度/寬度：
  如高度，可經過瀏覽器內頁面可用高度 - html展現高度得出，即window.innerHeight - documentElement.clientHeight。

3. 獲取屏幕寬高

• screen.height：
  屏幕高度。
• screen.availHeight：
  屏幕可用高度。即屏幕高度減去上下任務欄後的高度，可表示爲軟件最大化時的高度。
• screen.width：
  屏幕寬度。
• screen.availWidth：
  屏幕可用寬度。即屏幕寬度減去左右任務欄後的寬度，可表示爲軟件最大化時的寬度。
• 任務欄高/寬度：
  可經過屏幕高/寬度 減去 屏幕可用高/寬度得出。如：任務欄高度 = screen.height - screen.availHeight 。

4. 注意

• 瀏覽器寬高和頁面寬高會隨着瀏覽器縮放而改變
• 屏幕寬高不隨瀏覽器縮放而改變，可是通過測試（Chrome、Opera、Firefox、IE、360），只有360獲取的是屏幕實際寬高，而其餘瀏覽器獲取的是屏幕縮放後的寬高
• 呃，發現各個瀏覽器對這些屬性解釋不同，後面繼續補充

5. 參考資料

• web開發中獲取的各類高度和寬度