朋友们，美好的一天！
我向您介绍了Dmitri Pavlutin 的简短笔记“如何在JavaScript中获取屏幕，窗口和网页大小”的翻译。
要确定浏览器窗口的方向（横向或纵向），可以比较其宽度和高度。
但是，很容易对各种可用尺寸感到困惑：有屏幕尺寸，窗口尺寸，网页等。
这些尺寸是什么意思，最重要的是，如何获得它们？这就是我要告诉你的。
1.屏幕
1.1。屏幕尺寸
屏幕尺寸是整个屏幕的宽度和高度：监视器或移动显示器。
您可以使用
screenobject属性获取有关屏幕尺寸的信息window：
const screenWidth = window.screen.width
const screenHeight = window.screen.height
1.2。可用屏幕尺寸
可用的屏幕大小是没有操作系统工具栏的活动屏幕的宽度和高度。
要获得可用的屏幕尺寸，请再次参考
window.screen：
const availableScreenWidth = window.screen.availWidth
const availableScreenHeight = window.screen.availHeight
2.窗口
2.1。外窗尺寸（或外窗尺寸）
外窗口大小是当前浏览器窗口的宽度和高度，包括地址栏，标签栏和其他浏览器栏。
您可以使用属性
outerWidth和outerHeight对象获取有关外部窗口大小的信息window：
const windowOuterWidth = window.outerWidth
const windowOuterHeight = window.outerHeight
2.2。内窗尺寸（或内窗尺寸）
窗口的内部大小是视口（视口）的宽度和高度。
该对象
window提供属性innerWidth和innerHeight：
const windowInnerWidth = window.innerWidth
const windowInnerHeight = window.innerHeight
如果要获取没有滚动条的窗口的内部大小，请执行以下操作：
const windowInnerWidth = document.documentElement.clientWidth
const windowInnerHeight = document.documentElement.clientHeight
3.网页大小
网页大小是显示内容（渲染内容）的宽度和高度。
使用以下命令获取网页的大小（包括页面填充，但不包括边框，填充和滚动条）：
const pageWidth = document.documentElement.scrollWidth
const pageHeight = document.documentElement.scrollHeight
如果
pageHeight大于窗口的内部高度，则存在垂直滚动条。
4。结论
希望您现在了解如何获得不同的尺寸。
屏幕尺寸是监视器（或显示器）的尺寸，可用屏幕尺寸是没有OS工具栏的屏幕尺寸。
外窗口大小是活动浏览器窗口的大小（包括搜索栏，标签栏，打开的侧边栏等），内窗口大小是视口的大小。
最后，网页的大小就是内容的大小。
谢谢朋友们的关注！