js获取浏览器和设备的 width和height,
获取宽高参考:
方法:
网页可见区域宽: 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!!