javaScript 屏幕宽高,浏览器宽高

最新推荐文章于 2022-12-09 17:33:49 发布

hoho.

最新推荐文章于 2022-12-09 17:33:49 发布

阅读量239

点赞数

分类专栏： javaScript web前端

本文链接：https://blog.csdn.net/hshoho/article/details/95894725

版权

javaScript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

web前端

1 篇文章 0 订阅

订阅专栏

javaScript 屏幕宽高,浏览器宽高

记录下js取得屏幕,浏览器宽高的方法, 方便以后查看.

通过写简单html页面进行验证. 调整浏览器位置,大小后,刷新页面,查看控制台输出.
(如有错漏,请指正.谢谢!)

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script type="text/javascript">
		console.log('===========================================================')
		console.log(window.screen.height + '	window.screen.height');
		console.log(window.screen.availHeight + '	window.screen.availHeight');
		console.log(window.outerHeight + '	window.outerHeight');
		console.log(window.innerHeight + '	window.innerHeight');
		console.log(document.documentElement.clientHeight + '	document.documentElement.clientHeight');
		//console.log(document.body.clientHeight); //此行会报错,我是菜鸟,不懂原因
		console.log('===========================================================')
		console.log(window.screen.width + '	window.screen.width');
		console.log(window.screen.availWidth + '	window.screen.availWidth');
		console.log(window.outerWidth + '	window.screen.outerWidth');
		console.log(window.innerWidth + '	window.screen.innerWidth');
		console.log(document.documentElement.clientWidth + '	document.documentElement.clientWidth');
		//console.log(document.body.clientWidth); //此行会报错,我是菜鸟,不懂原因
	</script>
</head>
<body>
宽高
</body>
</html>

结果

在这里插入图片描述
总结如下:

上图红色线从上到下, 依次是

window.screen.width
电脑屏幕宽度
window.screen.availWidth
电脑屏幕除去左右两侧工具栏的宽度(上图中左右两侧没有工具栏)
window.outerWidth
整个浏览器的宽度(包括浏览器侧边工具栏及浏览器边框)
window.innerWidth
浏览器内部可见区的宽度(包括浏览器滚动条,但不包括浏览器侧边工具栏)
document.documentElement.clientWidth
浏览器内部可见区的宽度(包括浏览器滚动条,但不包括浏览器侧边工具栏)

上图紫色线从左到右, 依次是

window.screen.height
电脑屏幕高度
window.screen.availHeight
电脑屏幕除去顶部及底部工具栏的高度
window.outerHeight
整个浏览器的高度(包括浏览器工具栏,状态栏,…,及浏览器边框)
window.innerHeight
浏览器内部可见区的高度(包括浏览器滚动条,但不包括浏览器工具栏,状态栏)
document.documentElement.clientHeight
浏览器内部可见区的高度(包括浏览器滚动条,但不包括浏览器工具栏,状态栏)

hoho.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript 屏幕宽高,浏览器宽高

javaScript 屏幕宽高,浏览器宽高在js中取得屏幕,浏览器等的宽高. 以免混淆,记录下来.通过写简单html页面进行验证. 调整浏览器位置,大小后,刷新页面,查看控制台输出.(如有错漏,请指正.谢谢!)<!DOCTYPE html><html><head> <title>test</title> <scrip...
复制链接

扫一扫

专栏目录