移动端视口高度动态变化需持续响应：监听页面滚动、软键盘唤起/收起等场景，通过 resize + focusin/focusout 组合监听，用 requestAnimationFrame 和阈值过滤优化更新，优先使用 visualViewport 高度并兜底 100vh。
移动端浏览器地址栏、底部导航栏的显示与隐藏会动态改变 window.innerHeight，导致基于它计算的高度在页面滚动或切换视图时出现偏差——常见于全屏布局、弹窗、输入框唤起键盘后内容被遮挡等问题。关键不是“获取一次”，而是“持续响应视口高度变化”。
理解 height 变化的触发时机
移动端的 window.innerHeight 并非静态值：
- 页面加载时取值，可能对应「地址栏展开」状态（如 Chrome Android 初始加载）
- 用户向下滚动 → 地址栏收起 →
innerHeight增大（约 60–100px） - 聚焦 input 唤起软键盘 → 底部导航栏/键盘覆盖 →
innerHeight显著减小（常少 200–300px） - 键盘收起或页面回退 → 高度恢复，但 DOM 可能未及时重绘
用 resize + focus/blur 组合监听关键变化
仅监听 resize 不够（iOS Safari 对键盘弹出不触发 resize），需补充输入事件：
- 监听
window.addEventListener('resize', updateHeight)—— 覆盖滚动、横竖屏等场景 - 监听
document.addEventListener('focusin', e => { if (e.target.matches('input, textarea, select')) updateHeight(); })—— 键盘弹出前抓最新高度 - 监听
document.addEventListener('focusout', e => { if (e.target.matches('input, textarea, select')) setTimeout(updateHeight, 100); })—— 键盘收起有延迟，加 setTimeout 确保 DOM 更新完成
安全更新高度：避免抖动与重复计算
直接赋值可能导致样式跳变或循环触发，建议：
- 用
requestAnimationFrame批量更新，防止 layout thrashing - 缓存上一次有效高度，仅当变化 > 5px 时才应用（过滤微小波动）
- 对需要适配的容器（如 `.layout-main`）设置
min-height: 100vh作为兜底，再用 JS 动态设style.height = innerHeight + 'px' - 若使用 CSS-in-JS 或 React，将 height 存入 state，并在 effect 中清理监听器
兼容 iOS Safari 的特殊处理
iOS 15+ 对 visualViewport 支持更稳定，可降级使用：
- 优先尝试
visualViewport?.height || window.innerHeight - 监听
visualViewport?.addEventListener('resize', ...)，它对键盘变化响应更及时 - 注意：Safari 在键盘收起后可能仍保留缩小后的 viewport 高度，此时需结合
scrollY === 0 && document.activeElement === null判断是否已完全恢复
