JavaScript获取浏览器的显示区域大小信息
针对IE Firefox 数值不一样
| 区域说明 | 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 |
写个小例子测试一下，看看自己的浏览器现在的大小是多少，这个对于页面resize后的布局非常有用！
阅读代码编辑代码运行效果复制HTML代码保存代码
<!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 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 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 οnresize="javascript:displayScreenSize();" οnlοad="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>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lzgctgc/archive/2007/08/17/1748399.aspx
JavaScript获取浏览器的显示区域大小信息相关推荐
- js获取浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerHeight - 浏 ...
- html中获取浏览器窗口宽度,JavaScript 获取浏览器窗口的大小
简明现代魔法 -> JavaScript -> JavaScript 获取浏览器窗口的大小 JavaScript 获取浏览器窗口的大小 2010-04-16 程序演示: 获取浏览器当前窗口 ...
- JavaScript获取浏览器可视区域的宽高
JavaScript获取浏览器可视区域的宽高 在做项目的时候,我们常常需要对项目做一些优化,来提升页面响应的速度,比如进入可视区域后再发送请求获取数据或者是填充模板,这个时候就需要能够获取到浏览器的可 ...
- Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法
摘要: 由于浏览器的差异,许多信息的获取都要考虑兼容性,窗口中文档可用尺寸是一个经常需要用到的信息,由于浏览器不同甚至版本不同,获取的方法也不一样,本文介绍的函数能够兼容各种浏览器,获取这一信息.同时 ...
- 通过selenium获取浏览器的cookie等头部信息
通过selenium获取浏览器的cookie等头部信息 一.背景介绍 对于部分有登陆限制的网站/APP我们无法通过登陆接口实现登陆(比如验证码) 但是我们还想绕过登陆接口通过接口来实现一些操作,毕竟U ...
- Javascript获取页面、屏幕尺寸大小参数
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clien ...
- 获取浏览器的可视区域尺寸
测试例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- JavaScript——获取浏览器滚动条(ScrollBar)宽度
问题描述 不同浏览器的滚动条宽度不相同,需要动态获取浏览器滚动条宽度. 问题分析 screen.width屏幕分辨率宽度 document.body.scrollWidth 页面完整宽度 docume ...
- Winform MDI窗体子窗体显示区域大小
1.建立一个专门用于获取MDI父窗体展示子窗体的区域的大小的空白窗体,在窗体Load时就实例化该窗体,但不show出来. private void Main_Load(object sender, E ...
最新文章
- LabVIEW实现CRC校验
- 西安交通大学计算机科学与技术学科评估,西安交通大学学科评估排名！附西安交大a类学科名单...
- Ubuntu 创建开机自启动脚本的方法
- nagios 监控平台搭建
- 主线程中有多个handler的情况
- 照顾好自己才能照顾好别人_6种照顾数字外观的方法
- 戴尔PowerEdge-C服务器新成员：PowerEdge C5125和C5220
- 20220219：力扣第72场双周赛题解
- python3 logging模块中文乱码_Python logging模块写入中文出现乱码
- Lync问题解决之前端服务器Wmf2008R2错误
- centos 并发请求数_彻底理解 jmeter 的线程数与并发数之间的关系
- [转载]用户（User）和用户组（Grou…
- Kettle构建Hadoop ETL实践（一）：ETL与Kettle
- echarts使用之坑 隐藏显示echarts变形 echarts官网访问不了
- 《学习日记之Python》——GIF分解成图片
- 省选＋NOI 第九部分 博弈论
- 单龙芯3A3000-7A1000PMON研究学习-（23）撸起袖子干-分析代码前的准备工作5
- 3.4 haas506 2.0开发教程-example-ads1115
- Qt Creator编辑3D场景
- jcaptcha配置验证码