HTML頁面中JavaScript能獲取到的各種屏幕大小信息
阿新 • • 發佈：2017-12-27
windows 部分 菜單 div markdown doc rip oct 寬度
在HTML頁面中，通過JavaScript代碼訪問 window 對象，能夠獲取到很多表征屏幕大小的信息，下面列舉並加以區分。
window 對象中的屏幕信息
window.innerheight、 window.innerwidth
- 只讀屬性，以像素計
- 瀏覽器窗口的文檔顯示區的高度和寬度
- 不包括菜單欄、工具欄以及滾動條等的高度
- IE8以下不支持這些屬性，用 document.documentElement 或 document.body （與 IE 的版本相關）的 clientWidth 和 clientHeight 屬性作為替代
window.outerheight、 window.outerwidth
- 只讀屬性，以像素計
- 整個瀏覽器窗口的高度和寬度
- 常用於設置 window.open 打開的窗口寬度和高度
- IE8以下不支持此屬性，且沒有提供替代的屬性
window.screenLeft、 window.screenTop、 swindow.creenX、 window.screenY
- 只讀屬性，整數
- 瀏覽器窗口的左上角在屏幕上的的 x 坐標和 y 坐標
- IE、Safari 和 Opera 支持 screenLeft 和 screenTop
- Firefox 和 Safari 支持 screenX 和 screenY
window.screen.availHeight、 window.screen.availHeightavailWidth
- 以像素計
- 瀏覽器的屏幕的可用高度和寬度
- Windows中不包括分配給半永久特性（如屏幕底部的任務欄）的垂直空間
window.screen.height、 window.screen.width
- 以像素計
- 顯示器屏幕的高度和寬度
- 調整顯示設備的分辨率會發生變化
- 少部分移動設備上面的值並不是真正的顯示屏大小，如三星S8
document 對象中的屏幕信息
很復雜！真的很復雜！這些值根據是否指定 DOCTYPEIE 、網頁是否超過窗口寬度 有關系。而且FireFox，Chrome這些主流瀏覽器裏面針對元素的 clientWidth、 offsetWidth、 scrollWidth信息技術都有各自的標準。下面簡單說明作為參考。詳細新在實際應用中進行調整。
下面的 document.body 和 document.documentElement 類似，body也是一個DOM element。
document.body.clientHeight、 document.body.clientWidth
- 瀏覽器中可顯示內容區域的高度和寬度
- document.documentElement 表示元素的可見高度和寬度
- 與頁面內容多少無關
- 滾動條不算在內，padding算在內
- clientHeight = topPadding + bottomPadding+ height - scrollbar.height
document.body.offsetHeight、 document.body.offsetWidth
- 包括邊線的網頁內容可見區域高度和寬度
- offsetHeight = clientHeight + 滾動條 + 邊框
document.body.scrollHeight、 document.body.scrollWidth
- 網頁正文全文高度和寬度
- 不同的瀏覽器中 scrollHeight 和 clientHeight 的大小關系不一樣
解決方案
可以使用下面的方式折中取 scrollWidth 和 clientWidth ：
var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;下面列舉通用HTML元素 element 的大小屬性信息：
- element.clientHeight : 元素的可見高度
- element.clientWidth : 元素的可見寬度
- element.offsetHeight : 元素的高度
- element.offsetWidth : 元素的寬度
- element.offsetLeft : 元素的水平偏移位置
- element.offsetTop : 元素的垂直偏移位置
- element.offsetParent : 元素的偏移容器
- element.scrollHeight : 元素的整體高度
- element.scrollLeft : 元素左邊緣與視圖之間的距離
- element.scrollTop : 元素上邊緣與視圖之間的距離
- element.scrollWidth : 元素的整體寬度
由於本人才疏學淺，不乏遺漏錯誤，歡迎大家指出。
原文出處：http://uusama.com/496.html
HTML頁面中JavaScript能獲取到的各種屏幕大小信息