最推荐使用window.innerWidth和window.innerHeight获取视口尺寸，它们返回CSS像素单位的宽高，已扣除滚动条且跨平台一致；outerWidth/outerHeight用于浏览器窗体尺寸，移动端不可靠；clientWidth/clientHeight受DOCTYPE和兼容性影响大，不建议优先使用；需用resize事件监听变化并节流处理。
直接用 window.innerWidth 和 window.innerHeight 就能拿到当前视口的宽高，这是最标准、兼容性好、无需等待 DOM 加载的方法。
为什么推荐 innerWidth / innerHeight
这两个属性返回的是 CSS 像素单位的视口尺寸，代表用户实际看到的内容区域大小：
- 已自动扣除垂直/水平滚动条占用的空间，结果就是纯内容区尺寸
- 实时响应缩放、窗口拉伸、设备旋转等变化
- 在 Chrome、Firefox、Safari、Edge 等主流浏览器中行为一致
- 页面脚本一执行就能读取，不需要等
DOMContentLoaded或load事件
别混淆 outerWidth / outerHeight
它们获取的是整个浏览器窗体（含地址栏、工具栏、边框）的像素尺寸：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 适合调试或桌面 PWA 场景，比如判断是否运行在独立窗口模式
- 在移动端（尤其是 Safari 和 Chrome for iOS）通常不可靠，值可能固定或不更新
- 不能用于响应式布局逻辑，因为和用户可见内容区域无关
慎用 clientWidth / clientHeight
虽然 document.documentElement.clientWidth/clientHeight 也能拿到近似值，但存在明显局限：
立即学习“Java免费学习笔记（深入）”；
- 受 DOCTYPE 声明影响，怪异模式下可能返回错误结果
- 页面有自定义缩放、CSS transform 缩放时，数值容易失真
- 横向滚动条出现时，它可能比
innerWidth小几个像素，导致断点判断偏差 - 需要确保
document.documentElement已存在，否则可能报错
配合 resize 事件动态响应
仅读取一次不够，多数场景需监听窗口尺寸变化：
- 用
window.addEventListener('resize', handler)注册监听器 - 务必加入节流（如 100ms 内最多执行一次），避免频繁触发影响性能
- 首次加载时主动调用一次 handler，保证初始状态正确
- 移动端要注意：地址栏显示/收起会改变
innerHeight，这也是需要监听的原因
