尺寸 API 测量的是哪一层？

示意图负责说明稳定的范围关系；下方数值直接读取当前浏览器。调整窗口、缩放页面，或在移动设备上弹出软键盘，可以观察哪些读数发生变化。

屏幕、窗口、视口与内容

这是范围示意而不是等比例设备截图。视觉视口是布局视口中当前可见的部分；完整内容可以超出布局视口并产生滚动。

当前浏览器真实读数

整块屏幕 screen.width × screen.height —

以 CSS 像素表示，不等于页面布局宽度。

屏幕可用区域 screen.availWidth × screen.availHeight —

可能排除任务栏等系统界面。

浏览器外部窗口 outerWidth × outerHeight —

包括浏览器界面，不用于 CSS 响应式判断。

布局视口，不含滚动条 documentElement.clientWidth × clientHeight —

通常最接近页面实际用于排版的区域。

布局视口，包含滚动条 innerWidth × innerHeight —

与 clientWidth 的差值通常来自滚动条。

视觉视口 visualViewport.width × height —

当前可见区域及其缩放、偏移。

完整文档内容 documentElement.scrollWidth × scrollHeight —

包括视口之外的可滚动内容。

像素密度 window.devicePixelRatio —

页面缩放、系统缩放或切换显示器时可能变化。