JS关于浏览器尺寸的方法

最新推荐文章于 2023-10-29 09:49:46 发布

weixin_30735745

最新推荐文章于 2023-10-29 09:49:46 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/archrjoe/p/3615419.html

本文展示了如何使用JavaScript获取网页元素尺寸、设备分辨率及屏幕可用工作区大小等关键信息，通过实例代码演示了获取BODY对象宽度、高度、可见区域尺寸、网页正文全文尺寸、滚动位置以及屏幕分辨率和可用工作区宽度与高度的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document.body.clientWidth BODY对象宽度。通配符未清零margin的时候，小于页面可见区域宽度
document.body.clientHeight BODY对象高度。
document.documentElement.clientWidth 可见区域宽度
document.documentElement.clientHeight 可见区域高度
document.body.scrollWidth 网页正文全文宽
document.body.scrollHeight 网页正文全文高
document.body.scrollTop 网页被卷去的高//未用过
document.body.scrollLeft 网页被卷去的左//未用过
window.screenTop 网页正文部分上//未用过
window.screenLeft 网页正文部分左//未用过
window.screen.width 屏幕分辨率的宽
window.screen.height 屏幕分辨率的高
window.screen.availWidth 屏幕可用工作区宽度
window.screen.availHeight 屏幕可用工作区高度(含浏览器框架的高度）

e.g.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; maximum-scale=1.0;" />
<style>
*{ margin:0; padding:0; line-height:20px; width:1000px; height:1000px;}
</style>
</head>
<body>
1
<script>
window.onload = function(){document.write('BODY对象宽度'+document.body.clientWidth+'<br />'+
	'BODY对象高度'+document.body.clientHeight+'<br />'+
	'可见区域宽度'+document.documentElement.clientWidth+'<br />'+
	'可见区域高度'+document.documentElement.clientHeight+'<br />'+
	'网页正文全文宽'+document.body.scrollWidth+'<br />'+
	'网页正文全文高'+document.body.scrollHeight+'<br />'+
	'网页被卷去的高'+document.body.scrollTop+'<br />'+
	'网页被卷去的左'+document.body.scrollLeft+'<br />'+
	'网页正文部分上'+window.screenTop+'<br />'+
	'网页正文部分左'+window.screenLeft+'<br />'+
	'屏幕分辨率的宽'+window.screen.height+'<br />'+
	'屏幕分辨率的高'+window.screen.width+'<br />'+
	'屏幕可用工作区宽度'+window.screen.availWidth+'<br />'+
	'屏幕可用工作区高度'+window.screen.availHeight
	)}
</script>
</body>
</html>

pc chrome

BODY对象宽度1000
BODY对象高度1000
可见区域宽度1425
可见区域高度392
网页正文全文宽1425
网页正文全文高1000
网页被卷去的高0
网页被卷去的左0
网页正文部分上0
网页正文部分左0
屏幕分辨率的宽900
屏幕分辨率的高1440
屏幕可用工作区宽度1440
屏幕可用工作区高度860

ios chrome

BODY对象宽度1000
BODY对象高度1000
可见区域宽度320
可见区域高度416
网页正文全文宽1000
网页正文全文高1000
网页被卷去的高0
网页被卷去的左0
网页正文部分上0
网页正文部分左0
屏幕分辨率的宽480
屏幕分辨率的高320
屏幕可用工作区宽度320
屏幕可用工作区高度460　

转载于:https://www.cnblogs.com/archrjoe/p/3615419.html