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
浏览器内部可见区的高度(包括浏览器滚动条,但不包括浏览器工具栏,状态栏)