最推荐使用window.innerwidth和window.innerheight获取视口尺寸，它们返回css像素单位的宽高，已扣除滚动条且跨平台一致；outerwidth/outerheight用于浏览器窗体尺寸，移动端不可靠；clientwidth/clientheight受doctype和兼容性影响大，不建议优先使用；需用resize事件监听变化并节流处理。
最直接、最推荐的方式是用 window.innerWidth 和 window.innerHeight。
获取当前可视区域（视口）尺寸
这两个属性返回的是 CSS 像素单位的宽高，代表用户实际看到的页面区域大小，已自动扣除滚动条占用空间，且在桌面和移动端浏览器中表现一致。
- window.innerWidth：返回视口宽度（不含垂直滚动条宽度）
- window.innerHeight：返回视口高度（不含水平滚动条高度）
- 页面加载完成即可读取，无需等待 DOM 加载完毕
注意 outerWidth / outerHeight 的区别
如果需要获取整个浏览器窗口（含地址栏、工具栏、边框等）的尺寸，可用：
- window.outerWidth 和 window.outerHeight
- 它们反映的是浏览器窗体本身的像素尺寸，常用于调试或桌面 PWA 场景
- 在移动端 Safari 或 Chrome 中通常不可靠，不建议用于响应式布局逻辑
慎用 documentElement.clientWidth/clientHeight
虽然 document.documentElement.clientWidth 也能拿到近似视口宽度，但它受文档类型（DOCTYPE）、CSS 重置、缩放等影响较大：
- 在怪异模式（Quirks Mode）下行为不稳定
- 某些旧版 IE 对 clientWidth 的计算方式与 innerWidth 不一致
- 现代开发中，除非兼容极老环境，否则不必 fallback 到它
监听窗口尺寸变化
当用户缩放、旋转屏幕或拖动窗口时，需实时响应尺寸更新：
- 使用
window.addEventListener('resize', handler) - 避免高频触发，可加节流（如 debounce 100ms）
- 首次执行建议立即调用一次 handler，确保初始值准确
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
