JavaScript获取浏览器窗口尺寸需区分视口、文档和元素三类场景：视口用innerWidth/clientWidth，文档用scrollHeight，元素定位推荐getBoundingClientRect()，并配合resize事件与ResizeObserver监听变化。
要获取浏览器窗口的尺寸和布局信息，JavaScript 提供了多个属性和方法，关键在于区分不同场景下的需求：是视口大小、整个文档尺寸，还是元素在页面中的位置。选错属性容易拿到错误值，比如用 window.innerWidth 却忽略了滚动条占用空间，或用 offsetTop 却没考虑父级定位上下文。
获取当前可视区域（视口）尺寸
视口指用户当前能看到的网页区域，不包括滚动条、地址栏等浏览器 UI。适合响应式适配或判断是否显示弹窗。
- window.innerWidth / window.innerHeight：返回 CSS 像素单位的宽高，包含滚动条宽度（部分浏览器会减去，实际以浏览器为准），最常用且兼容性好（IE9+）
- document.documentElement.clientWidth / clientHeight：更可靠地获取纯内容可视区域宽高，不包含滚动条，推荐用于精确布局计算
- 注意：
window.outerWidth / outerHeight返回整个浏览器窗口尺寸（含工具栏、边框），一般不用来判断页面布局
获取整个文档（页面）的尺寸
当需要知道页面总高度以便实现滚动到底部检测或懒加载时，需读取文档整体尺寸。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- document.documentElement.scrollHeight / scrollHeight：返回整个文档高度（含不可见区域），是判断“是否滚动到底”的核心依据
-
document.body.scrollHeight 在某些情况下（如 DOCTYPE 缺失）可能更准确，但现代标准页面应优先用
documentElement - 宽度同理，
scrollWidth可获取文档总宽度，适用于横向滚动判断
获取元素在页面中的位置与尺寸
定位元素时，需明确是相对于视口、父容器还是文档顶部。不同方法返回结果差异大，不能混用。
立即学习“Java免费学习笔记（深入）”；
-
element.getBoundingClientRect()：返回元素相对于视口左上角的坐标（
top,left）及宽高，自动处理缩放、滚动偏移，最推荐 -
element.offsetLeft / offsetTop：相对于最近的已定位（
position: relative/absolute/fixed）祖先元素，若无则相对于body，易受 CSS 定位影响 -
element.clientLeft / clientTop：返回元素左边框/上边框宽度，常用于修正
getBoundingClientRect()的边界误差
监听尺寸变化并响应
窗口缩放、设备旋转、侧边栏展开都可能改变视口，需主动监听而非只在初始化时获取。
- 用
window.addEventListener('resize', handler)监听窗口大小变化，注意高频触发，建议加节流（如 Lodash 的throttle或简单时间戳判断） - 对单个元素尺寸变化，可用
ResizeObserver（现代浏览器支持，IE 不支持），比轮询高效得多 - 避免在 resize 回调中频繁操作 DOM 或触发重排，把计算逻辑和渲染逻辑分开
