获取浏览器视口宽高应优先使用 window.innerWidth 和 window.innerHeight，二者返回 CSS 像素单位的可视区域尺寸（自动排除滚动条），实时响应缩放、横竖屏等变化；兼容旧版 IE 可 fallback 到 document.documentElement.clientWidth/clientHeight；切勿混淆 screen.width/height（设备物理逻辑像素）；监听 resize 事件时需节流并清理。
获取 DOM 元素所在视口的宽高尺寸，实际是指获取浏览器当前可视区域（viewport）的大小，而不是元素自身的尺寸。这个需求常见于响应式布局、弹窗定位、滚动计算等场景。关键在于用对 BOM 属性，避免混淆“视口”“屏幕”“文档”三类尺寸。
用 window.innerWidth 和 window.innerHeight 最直接
这两个属性返回的是当前浏览器窗口的可视区域宽高（CSS 像素单位），已自动排除滚动条占用空间，兼容所有现代浏览器，是首选方案。
- window.innerWidth：视口宽度，含垂直滚动条时不包含其宽度（Safari 行为一致；Chrome/Firefox 在某些旧版本中曾包含，但当前主流版本均已统一为排除）
- window.innerHeight：视口高度，同理排除水平滚动条
- 值实时更新，缩放、横竖屏切换、窗口拖拽后立即生效
- 在 iframe 中调用，返回的是该 iframe 自身的视口尺寸
兼容旧浏览器可 fallback 到 document.documentElement
当需要支持 IE8 或更早版本时，可用 document.documentElement.clientWidth / clientHeight 作为备选。注意它受 CSS 影响（如 html 元素设置了 padding 或 border），且需判断文档模式。
- 标准模式下（
document.compatMode === "CSS1Compat"），优先取document.documentElement.clientWidth - 怪异模式下，退回到
document.body.clientWidth - 现代项目一般无需此逻辑，但封装工具函数时可保留简单 fallback
别把 screen 和 viewport 搞混
screen.width / screen.height 返回的是设备物理屏幕的逻辑像素尺寸（如 iPhone 14 的 screen.width 是 414），不会随窗口缩放或旋转变化，也不反映用户实际看到的页面区域——它不适合做布局适配。
立即学习“Java免费学习笔记（深入）”；
- 适合场景：上报设备型号、调试 DPR、判断是否为平板/桌面设备（配合 user agent）
- 不适合场景：设置容器宽度、计算弹窗位置、响应式断点
- 真正做断点判断，推荐用
window.matchMedia()，比手动读 innerWidth 更语义化、性能更好
监听尺寸变化记得防抖和初始化
只读属性本身不触发事件，要持续响应尺寸变化，必须监听 resize 事件。但该事件高频触发，需优化。
- 首次加载时主动调用一次获取初始值，避免首屏逻辑缺失
- resize 回调内建议加节流（throttle）或防抖（debounce），间隔 50–100ms 足够
- 单页应用中，路由切换后若不再需要监听，应调用
removeEventListener清理，防止内存泄漏
