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. 【k8s】基础环境配置部署

    基础环境配置部署 Hzero部署练习参考文档 https://docs.qq.com/sheet/DQWxlRlBXZmJ4b01G?tab=BB08J2&_t=1684458310312&a ...

  2. L2-008 最长对称子串 （回文子串 / DP / Manacher算法）

    对给定的字符串,本题要求你输出最长对称子串的长度.例如,给定Is PAT&TAP symmetric?,最长对称子串为s PAT&TAP s,于是你应该输出11. 输入格式: 输入在一 ...

  3. 关于 Serverless 应用架构对企业价值的一些思考

    作者:寒斜 前言 对于企业方而言,最关心的核心诉求就是如何能获取更多的营收,更高的利润,通俗点说就是如何赚更多的钱:企业赚钱的方式主要是通过出售企业服务,当用户购买更多的企业服务,企业赚的钱就越多:而 ...

  4. zzuli 1908

    ***做的时候判断当前位置为.的上下左右是否为*,如果全是改位置就改为*,如果四周中有为.,再DFS一下,其实就相当于把判断化为更小的子问题*** #include<iostream> # ...

  5. 杂谈 | 在 SEU 开会可以去哪里

    空间预约: 健雄书院预约系统 只对吴院人开放,其他人可通过前台志愿者预约. 秉文书院对全校开放(貌似?),需要 提前一天 预约. 借教室需要 提前两天 申请. 图书馆研讨间可以随时约,只是有点难抢. ...

  6. 【C++】static 静态成员

    静态成员 静态成员包括静态数据成员和静态成员函数,提供了同类对象间数据成员的共享机制 静态成员不是某个对象的成员,是类所有对象的共享成员,只建立一个成员副本 静态成员的定义与引用 定义格式:stati ...

  7. JS - 递归实现无限分类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [转帖]【sql server安全】sql server连接加密，sql server SSL加密连接

    https://www.cnblogs.com/gered/p/13595098.html#_label1_0 MSSQL - 最佳实践 - 使用SSL加密连接 回到顶部 author: 风移 回到顶 ...

  9. [转帖][java] GC (Allocation Failure)日志分析

    日前查看某个程序的日志,发现一直在报GC相关的信息,不确定这样的信息是代表正确还是不正确,所以正好借此机会再复习下GC相关的内容: 以其中一行为例来解读下日志信息: [GC (Allocation F ...

  10. [转帖]Kafka 核心技术与实战学习笔记（七）kafka集群参数配置（上）

    一.Broker 端参数 Broke存储信息配置 log.dirs:非常重要,指定Broker需要使用的若干文件目录路径,没有默认值必须亲自指定. log.dir:他只能表示单个路径,补充上一个参数用 ...