JS获取终端屏幕、浏览窗口的相关信息

时间：2022-04-04 22:09:08

查看终端屏幕相关信息，在windows系统的控制面板可以查到分辨率且可以设置，更具体的浏览器可视窗口等信息则需要借助其他工具。而在程序里需要动态获取时该怎么做呢？

琢磨的一个js方法，供大家参考。如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JS获取浏览器宽度</title>

 </head>

 <body onload="getInfos()">

 </body>

 <script>

     function getInfos() {

         document.write(

             "<h3>浏览器窗口信息如下: </h3>" +

             "屏幕分辨率为：" + screen.width + "*" + screen.height

             + "<br />" +

             "屏幕可用大小：" + screen.availWidth + "*" + screen.availHeight

             + "<br />" +

             "网页可见区域宽：" + document.body.clientWidth

             + "<br />" +

             "网页可见区域高：" + document.body.clientHeight

             + "<br />" +

             "网页可见区域宽(含边线宽)：" + document.body.offsetWidth

             + "<br />" +

             "网页可见区域高(含边线宽)：" + document.body.offsetHeight

             + "<br />" +

             "网页正文全文宽：" + document.body.scrollWidth

             + "<br />" +

             "网页正文全文高：" + document.body.scrollHeight

             + "<br />" +

             "网页被卷去的高：" + document.body.scrollTop

             + "<br />" +

             "网页被卷去的左：" + document.body.scrollLeft

             + "<br />" +

             "网页正文部分上：" + window.screenTop

             + "<br />" +

             "网页正文部分左：" + window.screenLeft

             + "<br />" +

             "屏幕分辨率的高：" + window.screen.height

             + "<br />" +

             "屏幕分辨率的宽：" + window.screen.width

             + "<br />" +

             "屏幕可用工作区高度：" + window.screen.availHeight

             + "<br />" +

             "屏幕可用工作区宽度：" + window.screen.availWidth

         );

     }

 </script>

 </html>

剩下的就是计算了，you try~

相关文章