视口、设备和文档大小.md

视口、设备和文档大小

视口是指浏览器中实际用于显示网页的部分，要测量视口的宽度和高度，请检查 document.documentElement 对象中的 clientWidth 和 clientHeight 属性。

const viewportWidth = document.documentElement.clientWidth
const viewportHeight = document.documentElement.clientHeight

注意：视口值不包括水平或垂直滚动条。

如果要计算包含滚动条的大小，请使用 window.innerWidth 和 window.innerHeight 属性。

window.innerWidth
window.innerHeight

如果你想获得整个浏览器窗口的大小，请使用 window.outerWidth 和 window.outerHeight 属性。它们返回浏览器窗口的完整大小，包括标题栏。

window.outerWidth
window.outerHeight

设备大小

screen.width 和 screen.height 属性返回当前屏幕的宽度和高度，其包含底部的任务栏：

const fullWidth = screen.width
const fullHeight = screen.height

而 screen.availWidth 和 screen.availHeight 属性返回可用的屏幕宽度和高度，其不包含任务栏，

const availableWidth = screen.availWidth
const availableHeight = screen.availHeight

注意，设备可以隐藏底部任务栏。如果隐藏了任务栏，那么 availHeight 和 height 相等。

文档大小

使用 document.body 上的 clientWidth 和 clientHeight 属性来获取 document 的大小。

const docWidth = document.body.clientWidth
const docHeight = document.body.clientHeight