JS如何获取屏幕、浏览器及网页高度宽度

来源：互联网 2023-02-21 23:14:37 158

在浏览器中，用JS获取高度和宽度都各有3种，分表包括屏幕，浏览器和网页的。

你可能一开始不是很理解三者的区别，下面详细介绍。

在浏览器执行代码的方法

在浏览器执行代码，可以先按f12打开控制台。右下角可以输入代码，如果右下角没有代码输入框，就按esc开启。

JS如何获取屏幕、浏览器及网页高度宽度？

1此文章非法爬取自百度经验

屏幕宽高是指显示器的分辨率，输入

console.log(window.screen.width,window.screen.height)

可以打印看见。

其中window.screen.width是宽度，window.screen.height是高度

例如我的显示器是1920*1080的，代码分表打印出来宽1920，高1080

JS如何获取屏幕、浏览器及网页高度宽度？

屏幕宽高相对于另外2个宽高更加稳定。条件系统分辨率可以改变这个宽高。

在屏幕上点击右键，进入系统分辨率设置。

JS如何获取屏幕、浏览器及网页高度宽度？

例如我将系统分辨率设置为1680*900

JS如何获取屏幕、浏览器及网页高度宽度？

现在打印的屏幕宽高也变了

JS如何获取屏幕、浏览器及网页高度宽度？

浏览器宽高是指浏览器窗口最大化时的宽高，普通的最大化后，一般就是去掉系统任务栏高度，而宽度和屏幕宽是一样的。

JS如何获取屏幕、浏览器及网页高度宽度？

输入

console.log(window.screen.availWidth,window.screen.availHeight)

可以查看浏览器宽高

JS如何获取屏幕、浏览器及网页高度宽度？

这个宽高在任务栏占用空间变化时会变化，例如我让任务栏变高，浏览器可用高度会变小。

JS如何获取屏幕、浏览器及网页高度宽度？

网页宽高，是指页面所占的宽高，浏览器除了页面内容以外的部分，不计算在内。

例如下图，标签栏，地址栏，书签栏，控制台等全不计算在宽高的范围里面，只有网页内容区域才是。

输入

console.log(window.innerHeight,window.innerWidth)

可以打印得到

JS如何获取屏幕、浏览器及网页高度宽度？

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！