JavaScript 获取浏览器的显示区域大小信息
来源:互联网 发布:常用网络协议端口 编辑:程序博客网 时间:2024/05/09 13:48
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html><head>
- <title>Screen Size Test</title>
- <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 windowwindowTopHeight =window.screenTop; //网页正文部分上边距
- var windowwindowLeftWidth =window.screenLeft; //网页正文部分左边距
- var screenHeight =window.screen.height; //屏幕分辨率的高
- var screenWidth =window.screen.width; //屏幕分辨率的宽
- var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度
- var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度
- var Str="<p>";
- Str+="网页可见区域宽:<span class='data'>"+bodyWidth+"px</span><br>";
- Str+="网页可见区域高:<span class='data'>"+bodyHeight+"px</span><br>";
- Str+="网页可见区域宽(包括边线的宽):<span class='data'>"+bodyWidthWithBorder+"px</span><br>";
- Str+="网页可见区域高(包括边线的宽):<span class='data'>"+bodyHeightWithBorder+"px</span><br>";
- Str+="网页正文全文宽:<span class='data'>"+bodyWidthWithScroll+"px</span><br>";
- Str+="网页正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>";
- Str+="网页被卷去的上边距:<span class='data'>"+bodyTopHeight+"px</span><br>";
- Str+="网页被卷去的左边距:<span class='data'>"+bodyLeftWidth+"px</span><br>";
- Str+="网页正文部分上边距:<span class='data'>"+windowTopHeight+"px</span><br>";
- Str+="网页正文部分左边距:<span class='data'>"+windowLeftWidth+"px</span><br>";
- Str+="屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>";
- Str+="屏幕分辨率的宽:<span class='data'>"+screenWidth+"px</span><br>";
- Str+="屏幕可用工作区高度:<span class='data'>"+screenAvailHeight+"px</span><br>";
- Str+="屏幕可用工作区宽度:<span class='data'>"+screenAvailWidth+"px</span><br>";
- Str+="</p>"
- document.getElementById('dispaly').innerHTML=Str;
- }
- // -->
- </script>
- <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 {
- 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="javascript:displayScreenSize();" onload="javascript:displayScreenSize();">
- <span class="title">Screen Size Test</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://apolloge.cnblogs.com/">
- apolloge</a> </span></p>
- </body></html>
区域说明 | JavaScript Code |
网页可见区域宽 | 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 |
- JavaScript获取浏览器的显示区域大小信息
- JavaScript 获取浏览器的显示区域大小信息
- JavaScript 获取浏览器的显示区域大小信息
- JavaScript获取浏览器的显示区域大小信息
- JavaScript 获取浏览器的显示区域大小信息
- window对象详解,JavaScript 获取浏览器的显示区域大小信息
- javaScript获取浏览器窗口可视区域大小
- 浏览器可见区域大小的获取
- 浏览器可见区域大小的获取
- 浏览器页面区域大小的获取
- JS获取浏览器可视区域的大小
- javascript 获取浏览器的大小
- 显示区域的大小
- 获取浏览器窗口可视化区域大小的兼容JS解决方案
- JavaScript 获取浏览器窗口的大小
- JavaScript 获取浏览器窗口的大小
- JavaScript获取浏览器信息
- Javascript获取浏览器信息
- 生命的空隙
- 禁用页面缓存的几种方法(静态和动态)
- BPM向左,工作流向右(一)什么是业务流程
- Access SQL 函数
- winform中DataGridView添加ComboBox的最终解决方案(点击ComboBox默认显示当前行的内容)
- JavaScript 获取浏览器的显示区域大小信息
- 我回来啦!
- 链表创建,显示,删除和倒置
- javascript身份证号码验证函数支持带x类型的身份证
- 在学C语言之第二章C语言的基本数据类型和存储类
- brcc32 异常问题
- Firefox - 附加组件 - 扩展 - Firebug - 更新 - 1.2.0
- MyEclipse快捷键
- Eclipse上的Tomcat插件安装和调试