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>&nbsp px
10             <hr>
11             网页可见区域高：<i id="document.body.clientHeight">xx</i>&nbsp px
12             <hr>
13             <hr>
14             网页可见区域宽： (包括边线的宽)<i id="document.body.offsetWidth">xx</i>&nbsp px
15             <hr>
16             网页可见区域高：  (包括边线的高)：<i id="document.body.offsetHeight">xx</i>&nbsp px
17             <hr>
18             网页正文全文宽：<i id="document.body.scrollWidth">xx</i>&nbsp px
19             <hr>
20             网页正文全文高：<i id="document.body.scrollHeight">xx</i>&nbsp px
21             <hr>
22             网页被卷去的高：<i id="document.body.scrollTop">xx</i>&nbsp px
23             <hr>
24             网页被卷去的左：<i id="document.body.scrollLeft">xx</i>&nbsp px
25             <hr>
26             网页正文部分上：<i id="window.screenTop">xx</i>&nbsp px
27             <hr>
28             网页正文部分左：<i id="window.screenLeft">xx</i>&nbsp px
29             <hr>
30             屏幕物理分辨率的高：<i id="window.screen.height">xx</i>&nbsp px
31             <hr>
32             屏幕物理分辨率的宽：<i id="window.screen.width">xx</i>&nbsp px
33             <hr>
34             屏幕可用工作区高度：<i id="window.screen.availHeight">xx</i>&nbsp px
35             <hr>
36             屏幕可用工作区宽度：<i id="window.screen.availWidth">xx</i>&nbsp px
37             <hr>
38             屏幕缩放因子：<i id="window.devicePixelRatio">xx</i>&nbsp 倍
39             <hr>
40             屏幕逻辑分辨率(缩放因子与物理分辨率的乘积)：<i id="window.screen.width * window.devicePixelRatio">xx</i>&nbsp 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>

运行效果图：

扫描二维码关注公众号，回复： 2780271 查看本文章

放大缩小屏幕，获取的参数会相应变化:

放大：

缩小：

over!!

js获取浏览器和设备的 width和height，

猜你喜欢