JavaScript 获取浏览器的显示区域大小信息

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Apolloge/archive/2006/07/04/HtmlPageSize.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript来获取浏览器及屏幕尺寸的方法，包括网页可见区域的宽度与高度、网页正文的宽度与高度等关键信息，并提供了一个示例代码帮助读者理解如何在页面布局调整时运用这些数据。

区域说明	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后的布局非常有用！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Screen Size Test</title>

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="";

Str+="网页可见区域宽:"+bodyWidth+"px ";

Str+="网页可见区域高:"+bodyHeight+"px ";

Str+="网页可见区域宽(包括边线的宽):"+bodyWidthWithBorder+"px ";

Str+="网页可见区域高(包括边线的宽):"+bodyHeightWithBorder+"px ";

Str+="网页正文全文宽:"+bodyWidthWithScroll+"px ";

Str+="网页正文全文高:"+bodyHeightWithScroll+"px ";

Str+="网页被卷去的上边距:"+bodyTopHeight+"px ";

Str+="网页被卷去的左边距:"+bodyLeftWidth+"px ";

Str+="网页正文部分上边距:"+windowTopHeight+"px ";

Str+="网页正文部分左边距:"+windowLeftWidth+"px ";

Str+="屏幕分辨率的高:"+screenHeight+"px ";

Str+="屏幕分辨率的宽:"+screenWidth+"px ";

Str+="屏幕可用工作区高度:"+screenAvailHeight+"px ";

Str+="屏幕可用工作区宽度:"+screenAvailWidth+"px ";

Str+=""

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

}

</script>

<!--

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>

Screen Size Test

Now we get the screen size about this browser

Screen Size Test by <a href="http://apolloge.cnblogs.com/">apolloge</a>

</body>

</html>

转载于:https://www.cnblogs.com/Apolloge/archive/2006/07/04/HtmlPageSize.html