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

posted @ 2023-10-09 09:56 yswenli 阅读(81) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 最新全国省市区行政数据

· SqlSugar的查询函数SqlFunc

· javascript使用——网页、屏幕的宽和高

· JS 获取浏览器的宽和高

· JS获取屏幕分辨率及当前窗口宽高等数据

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称： yswenli
园龄： 11年8个月
粉丝： 224
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类 (19)

SqlSugar(19)

yswenli

http://www.cnblogs.com/yswenli/

JavaScript获取浏览器的显示区域大小测试

公告

常用链接

最新随笔

我的标签

积分与排名

合集 (1)

随笔分类 (19)

随笔档案 (114)

文章档案 (4)

相册 (7)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<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>