JavaScript获取浏览器的显示区域大小测试

Now we get the screen size about this browser

网页可见区域宽 document.body.clientWidth:1912px
网页可见区域高 document.body.clientHeight:958px
网页可见区域宽(包括边线的宽) document.body.offsetWidth:1896px
网页可见区域高(包括边线的宽) document.body.offsetHeight:934px
网页正文全文宽: document.body.scrollWidth1912px
网页正文全文高: document.body.scrollHeight958px
网页被卷去的上边距 document.body.scrollTop:0px
网页被卷去的左边距 document.body.scrollLeft:0px
网页正文部分上边距 window.screenTop:5px
网页正文部分左边距 window.screenLeft:-1915px
屏幕分辨率的高: window.screen.height1080px
屏幕分辨率的宽: window.screen.width1920px
屏幕可用工作区高度 window.screen.availHeight:1032px
屏幕可用工作区宽度 window.screen.availWidth:1920px
内容可见区域宽度 document.documentElement.clientWidth:1912px
内容可见区域高度 document.documentElement.clientHeight:958px

<html>

<head>

    <title>JavaScript获取浏览器的显示区域大小测试</title>

    <style type="text/css">

        A:link {

            text-decoration: none;

            color: #ff0000;

            font-weight: normal;

        }

        A:visited {

            text-decoration: none;

            color: #ff6666;

            font-weight: normal;

        }

        A:active {

            text-decoration: none;

            color: #ff0000;

            font-weight: normal;

        }

        A:hover {

            text-decoration: underline;

            color: #ff0000;

            font-weight: normal;

        }

        .title {

            font-family: Verdana, Arial, Helvetica, sans-serif;

            font-size: 24px;

            font-weight: bold;

            color: #990000;

            display: block;

            text-align: center;

            vertical-align: middle;

            line-height: 200px;

        }

        .display {

            font-family: Verdana, Arial, Helvetica, sans-serif;

            font-size: 12px;

        }

        .data {

            color: #FF0000;

            font-weight: bold;

        }

        .foot {

            font-family: Verdana, Arial, Helvetica, sans-serif;

            font-size: 12px;

            color: #5e5e5e;

        }

    </style>

</head>

<body onresize="displayScreenSize()" onmousemove="displayScreenSize()">

    <span class="title">JavaScript获取浏览器的显示区域大小测试</span>

    <hr align="left" size="1" noshade>

    <span class="display">Now we get the screen size about this browser </span><br>

    <span class="display" id="dispaly"></span>

    <hr align="left" size="1" noshade>

    <p align="right"><span class="foot">Screen Size Test by <a href="http://yswenli.cnblogs.com/"> walle</a> </span></p>

</body>

<script language="JavaScript" type="text/JavaScript">

    function displayScreenSize()

    {

        var bodyWidth           =document.body.clientWidth;      //网页可见区域宽

        var bodyHeight          =document.body.clientHeight;     //网页可见区域高

        var bodyWidthWithBorder =document.body.offsetWidth;      //网页可见区域宽(包括边线的宽)

        var bodyHeightWithBorder=document.body.offsetHeight;     //网页可见区域高(包括边线的宽)

        var bodyWidthWithScroll =document.body.scrollWidth;      //网页正文全文宽

        var bodyHeightWithScroll=document.body.scrollHeight;     //网页正文全文高

        var bodyTopHeight       =document.body.scrollTop;        //网页被卷去的上边距

        var bodyLeftWidth       =document.body.scrollLeft;       //网页被卷去的左边距

        var windowTopHeight     =window.screenTop;               //网页正文部分上边距

        var windowLeftWidth     =window.screenLeft;              //网页正文部分左边距

        var screenHeight        =window.screen.height;           //屏幕分辨率的高

        var screenWidth         =window.screen.width;            //屏幕分辨率的宽

        var screenAvailHeight   =window.screen.availHeight;      //屏幕可用工作区高度

        var screenAvailWidth    =window.screen.availWidth;       //屏幕可用工作区宽度

        var contentWidth        =document.documentElement.clientWidth //内容可见区域宽

        var contentHeight       =document.documentElement.clientHeight //内容可见区域高

        var Str="<p>";

        Str+="网页可见区域宽 document.body.clientWidth:<span class='data'>"+bodyWidth+"px</span><br>";

        Str+="网页可见区域高 document.body.clientHeight:<span class='data'>"+bodyHeight+"px</span><br>";

        Str+="网页可见区域宽(包括边线的宽) document.body.offsetWidth:<span class='data'>"+bodyWidthWithBorder+"px</span><br>";

        Str+="网页可见区域高(包括边线的宽) document.body.offsetHeight:<span class='data'>"+bodyHeightWithBorder+"px</span><br>";

        Str+="网页正文全文宽: document.body.scrollWidth<span class='data'>"+bodyWidthWithScroll+"px</span><br>";

        Str+="网页正文全文高: document.body.scrollHeight<span class='data'>"+bodyHeightWithScroll+"px</span><br>";

        Str+="网页被卷去的上边距 document.body.scrollTop:<span class='data'>"+bodyTopHeight+"px</span><br>";

        Str+="网页被卷去的左边距 document.body.scrollLeft:<span class='data'>"+bodyLeftWidth+"px</span><br>";

        Str+="网页正文部分上边距 window.screenTop:<span class='data'>"+windowTopHeight+"px</span><br>";

        Str+="网页正文部分左边距 window.screenLeft:<span class='data'>"+windowLeftWidth+"px</span><br>";

        Str+="屏幕分辨率的高: window.screen.height<span class='data'>"+screenHeight+"px</span><br>";

        Str+="屏幕分辨率的宽: window.screen.width<span class='data'>"+screenWidth+"px</span><br>";

        Str+="屏幕可用工作区高度 window.screen.availHeight:<span class='data'>"+screenAvailHeight+"px</span><br>";

        Str+="屏幕可用工作区宽度 window.screen.availWidth:<span class='data'>"+screenAvailWidth+"px</span><br>";

        Str+="内容可见区域宽度 document.documentElement.clientWidth:<span class='data'>"+contentWidth+"px</span><br>";

        Str+="内容可见区域高度 document.documentElement.clientHeight:<span class='data'>"+contentHeight+"px</span><br>";

        Str+="</p>"

        document.getElementById('dispaly').innerHTML=Str;

     }

     displayScreenSize();

</script>

</html>

Screen Size Test by walle

JavaScript获取浏览器的显示区域大小测试的更多相关文章

  1. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  2. js获取浏览器窗口可视区域大小

    获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: •  window.innerHeight - 浏 ...

  3. Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小（无人值守，节约测试成本的福音，BOSS 最爱）

    在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大 ...

  4. Selenium2学习-022-WebUI自动化实战实例-020-JavaScript 在 Selenium 自动化中的应用实例之二（获取浏览器显示区域大小）

    前几篇文章中简略概述了,如何获取.设置浏览器窗口大小,那么我们该如何获取浏览器显示区域的大小呢?此文讲对此进行简略概述,敬请各位小主参阅.若有不足之处,敬请各位大神指正,不胜感激! 获取浏览器显示区域 ...

  5. Selenium2学习-023-WebUI自动化实战实例-021-获取浏览器显示区域大小，通过 WebDriver 截图功能

    之前的博文 020-JavaScript 在 Selenium 自动化中的应用实例之二(获取浏览器显示区域大小) 简述了通过 JavaScript 获取浏览器显示区域大小,此文将简述另一种获取浏览器显 ...

  6. JavaScript--DOM浏览器窗口可视区域大小

    浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: •  window.inn ...

  7. JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...

  8. JavaScript获取浏览器版本等信息

    ** 不同浏览器版本可能存在差异,使用时请测试自己的环境 ** 测试时各个浏览器版本 IE: 11.953.14393.0 Edge: Microsoft Edge 38.14393.0.0;Micr ...

  9. JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...

  10. javascript获取浏览器窗口大小办法

    四个属性: 1:outerWidth  2:outerHeight  3:innerWidth  4:innerHeight 经最新版本的浏览器(Chrom IE Firefox Opera)测试,初 ...

随机推荐

  1. Python openpyxl 将 Excel中的汉字 转换成拼音首字母

    将Excel中的汉字列,转换成拼音首字母,并保存 需要安装导入  pypinyin.openpyxl 库 # pip install pypinyin from pypinyin import laz ...

  2. MySQL 创建存储过程注意项

    MySQL server version for the  right syntax to use near 'IF' MySQL server version for the right synta ...

  3. 【每日一题】36. 小AA的数列 （二进制DP）

    补题链接:Here 算法涉及:位运算,DP 这道题想了很久但实在没想什么巧妙的解法,暴力的代码就不放,这里引用Kur1su 的思路 异或问题优先考虑二进制位,对于这个问题,我们需要考虑偶数长度的区间, ...

  4. 阿里云 X 森马 AIGC T恤设计大赛开启! 穿什么由你定，赢Airpods，作品定制联名T恤

    "关于宇宙,我所知道的最富诗意的事实之一就是, 我们身体中的每一个原子都曾经存在于某一颗爆发的恒星里. 组成你左手的原子和组成你右手的原子 很有可能来自不同的恒星, 而我们都是恒星的孩子, ...

  5. App Deploy as Code! SAE & Terraform 实现 IaC 式部署应用

    企业上云是近些年的发展热潮,越来越多的企业把自己的应用部署在各个云厂商中,利用云计算带来的弹性.灵活.安全.低成本等特性,轻松帮助企业搭建自己的应用. 随着企业规模和业务形态的发展,一个应用需要组合多 ...

  6. 3D编程模式：开篇

    大家好~现在开始新的系列文章:3D编程模式系列 本系列会介绍从我的实际开发经验中抽象提炼出来的编程模式,大家可直接应用它们到3D引擎开发.编辑器开发等领域中 相关资料: 课程录像回放 代码和课程ppt ...

  7. vue-asome-swiper

  8. 凸优化 | Lagrange 对偶：极大极小不等式的证明

    背景: Lagrange 对偶:对于优化问题 \[\begin{aligned} &\mathrm{minimize} ~~ &f_0(x) \\ &\mathrm{subje ...

  9. ONVIF网络摄像头(IPC)客户端开发—RTSP RTCP RTP加载H264视频流

    前言: RTSP,RTCP,RTP一般是一起使用,在FFmpeg和live555这些库中,它们为了更好的适用性,所以实现起来非常复杂,直接查看FFmpeg和Live555源代码来熟悉这些协议非常吃力, ...

  10. [转帖]TLS/SSL (Schannel SSP) 中的密码套件

    https://learn.microsoft.com/zh-cn/windows/win32/secauthn/cipher-suites-in-schannel 密码套件是一组加密算法. TLS/ ...