视口、设备和文档大小

视口是指浏览器中实际用于显示网页的部分，要测量视口的宽度和高度，请检查 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

设备大小

window.screen.width 和 window.screen.height 属性返回屏幕的完整分辨率（包含底部的任务栏）：

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

image.png

window.screen.availWidth 和 window.screen.availHeight（不包含任务栏）

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

image.png

文档大小

文档大小

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

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