獲取寬高參考:
方法：
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕物理分辨率的高： window.screen.height
屏幕物理分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
屏幕縮放因子：window.devicePixelRatio
屏幕邏輯分辨率：window.screen.width * window.devicePixelRatio (縮放因子與物理分辨率的乘積)
測試代碼：
1 <html> 2 <head> 3 <title>獲取屏幕高度</title> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <div> 8 <hr> 9 網頁可見區寬度：<i id="document.body.clientWidth">xx</i>  px 10 <hr> 11 網頁可見區域高：<i id="document.body.clientHeight">xx</i>  px 12 <hr> 13 <hr> 14 網頁可見區域寬： (包括邊線的寬)<i id="document.body.offsetWidth">xx</i>  px 15 <hr> 16 網頁可見區域高： (包括邊線的高)：<i id="document.body.offsetHeight">xx</i>  px 17 <hr> 18 網頁正文全文寬：<i id="document.body.scrollWidth">xx</i>  px 19 <hr> 20 網頁正文全文高：<i id="document.body.scrollHeight">xx</i>  px 21 <hr> 22 網頁被卷去的高：<i id="document.body.scrollTop">xx</i>  px 23 <hr> 24 網頁被卷去的左：<i id="document.body.scrollLeft">xx</i>  px 25 <hr> 26 網頁正文部分上：<i id="window.screenTop">xx</i>  px 27 <hr> 28 網頁正文部分左：<i id="window.screenLeft">xx</i>  px 29 <hr> 30 屏幕物理分辨率的高：<i id="window.screen.height">xx</i>  px 31 <hr> 32 屏幕物理分辨率的寬：<i id="window.screen.width">xx</i>  px 33 <hr> 34 屏幕可用工作區高度：<i id="window.screen.availHeight">xx</i>  px 35 <hr> 36 屏幕可用工作區寬度：<i id="window.screen.availWidth">xx</i>  px 37 <hr> 38 屏幕縮放因子：<i id="window.devicePixelRatio">xx</i>  倍 39 <hr> 40 屏幕邏輯分辨率(縮放因子與物理分辨率的乘積)：<i id="window.screen.width * window.devicePixelRatio">xx</i>  px 41 <hr> 42 43 </div> 44 </body> 45 <script> 46 47 document.getElementById("document.body.clientWidth").innerHTML = document.body.clientWidth; 48 document.getElementById("document.body.clientHeight").innerHTML = document.body.clientHeight; 49 document.getElementById("document.body.offsetHeight").innerHTML =document.body.offsetHeight ; 50 document.getElementById("document.body.offsetWidth").innerHTML = document.body.offsetWidth; 51 document.getElementById("document.body.scrollHeight").innerHTML = document.body.scrollHeight; 52 document.getElementById("document.body.scrollWidth").innerHTML =document.body.scrollWidth ; 53 document.getElementById("document.body.scrollHeight").innerHTML = document.body.scrollHeight; 54 document.getElementById("document.body.scrollTop").innerHTML = document.body.scrollTop; 55 document.getElementById("document.body.scrollLeft").innerHTML = document.body.scrollLeft; 56 document.getElementById("window.screenTop").innerHTML = window.screenTop; 57 document.getElementById("window.screenLeft").innerHTML =window.screenLeft ; 58 document.getElementById("window.screen.height").innerHTML = window.screen.height; 59 document.getElementById("window.screen.width").innerHTML =window.screen.width ; 60 document.getElementById("window.screen.width").innerHTML = window.screen.width; 61 document.getElementById("window.screen.availHeight").innerHTML = window.screen.availHeight; 62 document.getElementById("window.screen.availWidth").innerHTML = window.screen.availWidth; 63 document.getElementById("window.devicePixelRatio").innerHTML =window.devicePixelRatio ; 64 document.getElementById("window.screen.width * window.devicePixelRatio").innerHTML = window.screen.width * window.devicePixelRatio ; 65 66 67 </script> 68 </html>
運行效果圖：
放大縮小屏幕，獲取的參數會相應變化:
放大：
縮小：
over!!