JavaScript 获取屏幕、窗口、文档可视区域宽高全解析

在前端适配弹窗居中、滚动懒加载与响应式组件时，开发者经常混淆 screen、window.innerWidth 与 clientHeight 的区别。本文梳理各类宽高 API 的物理含义。

一、 核心视口与屏幕尺寸 API 速查

// 1. 用户显示器屏幕物理分辨率
const screenW = window.screen.width;
const screenH = window.screen.height;

// 2. 浏览器视口可视区域宽高（包含滚动条宽度）
const viewportW = window.innerWidth;
const viewportH = window.innerHeight;

// 3. 文档 HTML 实际可视区域宽高（不含滚动条，最常用）
const clientW = document.documentElement.clientWidth;
const clientH = document.documentElement.clientHeight;

// 4. 整张网页的完整滚动内容高度
const scrollH = document.documentElement.scrollHeight;