推荐使用 window.addEventListener('resize', handler) 监听窗口大小变化，需防抖处理、及时清理监听器，并结合 innerWidth/innerHeight 获取尺寸，移动端应额外监听 orientationchange 事件。
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
<p>用 <strong>window.addEventListener('resize', handler)</strong> 监听窗口大小变化，这是最标准、兼容性好且推荐的方式。</p>
<H3>使用 resize 事件监听窗口缩放</H3>
<p>浏览器窗口尺寸改变（拖拽边框、切换全屏、设备旋转等）会触发 <strong>resize</strong> 事件。注意它会高频触发，需防抖处理：</p>
<ul>
<li>直接绑定： <code>window.addEventListener('resize', () => { console.log('窗口尺寸变了'); });</code></li>
<li>避免重复绑定：不要在函数内反复调用 addEventListener，否则会累积监听器</li>
<li>记得清理：如果组件卸载或逻辑结束，用 <code>removeEventListener</code> 移除监听器，防止内存泄漏</li>
</ul>
<H3>防抖优化，避免频繁执行</H3>
<p>resize 在拖动窗口时可能每秒触发数十次，直接执行重绘或计算会卡顿。加个简单防抖：</p>
<ul>
<li>用 <code>setTimeout</code> + <code>clearTimeout</code> 实现基础防抖，延迟 150–300ms 执行</li>
<li>示例：定义一个 <code>let resizeTimer</code>，每次触发先清除旧定时器，再设新定时器</li>
<li>也可用 Lodash 的 <code>debounce</code>，但小项目不建议只为防抖引入整个库</li>
</ul>
<H3>获取当前窗口尺寸的正确方式</H3>
<p>监听到 resize 后，常用以下属性获取尺寸：</p>
<ul>
<li><code>window.innerWidth</code> / <code>window.innerHeight</code>：含滚动条内宽高，推荐用于响应式布局判断</li>
<li><code>document.documentElement.clientWidth</code> / <code>.clientHeight</code>：不含滚动条，与 CSS 视口更一致</li>
<li>避免用 <code>window.outerWidth</code>：那是整个浏览器窗口（含地址栏、工具栏），一般不需要</li>
</ul>
<H3>移动端要注意 orientationchange</H3>
<p>在 iOS 和部分 Android 上，单纯靠 resize 可能无法捕获屏幕旋转（尤其是 Safari）。可额外监听：</p>
<ul>
<li><code>window.addEventListener('orientationchange', handler)</code></li>
<li>该事件触发时，通常也会触发 resize，但单独监听更可靠</li>
<li>配合 <code>window.orientation</code>（已废弃）或用 <code>window.matchMedia('(orientation: landscape)')</code> 判断方向</li>
</ul> 
