JavaScript获取浏览器的显示区域大小测试
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获取浏览器的显示区域大小测试的更多相关文章
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- js获取浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerHeight - 浏 ...
- Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小（无人值守，节约测试成本的福音，BOSS 最爱）
在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大 ...
- Selenium2学习-022-WebUI自动化实战实例-020-JavaScript 在 Selenium 自动化中的应用实例之二（获取浏览器显示区域大小）
前几篇文章中简略概述了,如何获取.设置浏览器窗口大小,那么我们该如何获取浏览器显示区域的大小呢?此文讲对此进行简略概述,敬请各位小主参阅.若有不足之处,敬请各位大神指正,不胜感激! 获取浏览器显示区域 ...
- Selenium2学习-023-WebUI自动化实战实例-021-获取浏览器显示区域大小，通过 WebDriver 截图功能
之前的博文 020-JavaScript 在 Selenium 自动化中的应用实例之二(获取浏览器显示区域大小) 简述了通过 JavaScript 获取浏览器显示区域大小,此文将简述另一种获取浏览器显 ...
- JavaScript--DOM浏览器窗口可视区域大小
浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.inn ...
- JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...
- JavaScript获取浏览器版本等信息
** 不同浏览器版本可能存在差异,使用时请测试自己的环境 ** 测试时各个浏览器版本 IE: 11.953.14393.0 Edge: Microsoft Edge 38.14393.0.0;Micr ...
- JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...
- javascript获取浏览器窗口大小办法
四个属性: 1:outerWidth 2:outerHeight 3:innerWidth 4:innerHeight 经最新版本的浏览器(Chrom IE Firefox Opera)测试,初 ...
随机推荐
- GO语言之环境搭建和基本命令
目录 go语言基础 下载go编译器 go目录简介 gopath简介 环境变量配置 GOPATH PATH go语言项目结构 IDE下载与配置 安装goland goland里添加goroot和gopa ...
- KB21N、KB24N作业分配与冲销
一.KB21N 调用BAPI:BAPI_ACC_ACTIVITY_ALLOC_POST 经测试,分配订单时行项目一次性最多传332条数据 "------------------------- ...
- 如何在CSDN上如何快速转载博客
复制粘贴应该是最显而易见的方法,但是不仅会有丢失内容,而且格式也会丢失.要想达到更好的效果,可以从html源码入手. 1.在chrome浏览器中打开要转载的文章,右键选择检查(or使用F12) 2.在 ...
- Printer Queue,UVa 12100 (自定义标记法 + 优先队列）
题目描述: 我们需要用打印机打印任务.每个任务都有1~9间的优先级,优先级越高,任务越急. 打印机的运作方式:从打印队列里取出一个任务j,如果队列里有比j更急的任务,则直接把j放到打印队列尾部,否则打 ...
- SQL常用日期格式化转换与百分数转换
目录 SQL将小数转为保留两位的百分数 常用的日期格式化 补充: 秒/毫秒转为持续时间 常用拼接方式: 本篇开启数据库在工作中常用到的格式转换与工具,欢迎大家评论留言 SQL将小数转为保留两位的百分数 ...
- 换架 3D 飞机，继续飞呀飞
相信大多数图扑 HT 用户都曾见过这个飞机的 Demo,在图扑发展的这十年,这个 Demo 是许多学习 HT 用户一定会参考的经典 Demo 之一. 这个 Demo 用简洁的代码生动地展示了 OBJ ...
- Java开发者的Golang进修指南：从0->1带你实现协程池
在Java编程中,为了降低开销和优化程序的效率,我们常常使用线程池来管理线程的创建和销毁,并尽量复用已创建的对象.这样做不仅可以提高程序的运行效率,还能减少垃圾回收器对对象的回收次数. 在Golang ...
- 25-IP核简介
1.IP IP(Intellectual Property)即知识产权,在半导体产业中讲IP核定义为用于"ASIC或FPGA中的预先设计好的电路功能模块".简言之,这里的IP即电路 ...
- 电子科技大学--ARM实验Keil uvison5 安装以及S3C2440A芯片包下载
1.简介 本教程主要服务于电子科技大学软工嵌入式新生,节省一些查找资料的时间 2.过程 请按如下顺序安装: 1,安装mdk_514.exe (主体文件) 2,安装Keil.STM32F1xx_DFP. ...
- 2023年SWPU NSS 秋季招新赛 (校外赛道) MISC复盘WP
GIF Code 题目描述: 扫一扫即可获取Flag 给了一个含二维码的动图,分离一下得到九张二维码碎片,根据文件名数字按顺序组装,在线扫码即可 NSSCTF{3f0ac91b-3e0e-a7e2-7 ...