移动端 window.innerheight 忽大忽小是因 safari 和 chrome（ios）地址栏收起/展开时动态调整所致；应优先使用 visualviewport.height 并监听 visualviewport.resize 事件，fallback 可用 screen.height 结合方向与经验偏移估算。
移动端 window.innerHeight 为什么忽大忽小？
因为 Safari 和 Chrome（iOS）在地址栏收起/展开时会动态调整 window.innerHeight，不是 bug，是浏览器行为。用户滚动页面后地址栏隐藏，window.innerHeight 变大；往上轻拉或刷新，地址栏弹出，window.innerHeight 突然变小——这时候你的底部按钮、输入框就可能被遮住。
用 visualViewport 替代 window.innerHeight 更可靠
visualViewport 是专为响应视口缩放和 UI 遮挡设计的 API，它始终反映用户“实际可见”的区域高度，不受地址栏伸缩干扰。iOS 15+ 和 Android Chrome 均支持，兼容性足够覆盖主流场景。
实操建议：
- 优先读取
visualViewport.height，而非window.innerHeight - 监听
visualviewport.resize事件，而不是window.resize—— 后者在 iOS 上几乎不触发地址栏变化 - 注意：首次加载时
visualViewport可能尚未就绪，需加if ('visualViewport' in window)判断
示例：
if ('visualViewport' in window) {
const updateHeight = () => {
document.documentElement.style.setProperty('--vh', `${window.visualViewport.height}px`);
};
window.visualViewport.addEventListener('resize', updateHeight);
updateHeight(); // 初始化
}
fallback 方案：用 screen.height + orientation 保守估算
当 visualViewport 不可用（如老版 iOS Safari），硬靠 window.innerHeight 会出问题。这时可退而求其次：用 screen.height 作为上限，结合 window.orientation 或 matchMedia('(orientation: portrait)') 区分横竖屏，并减去一个经验偏移量（如 80px～120px）模拟底部安全区。
关键点：
-
screen.height是设备物理高度，稳定不变，适合做基准 - 竖屏下 Safari 地址栏约占用 70–90px，底部工具栏（如 iOS 底部手势条）约 34px，合计预留 100px 较稳妥
- 不要直接用
window.innerHeight的初始值作固定高度，它在页面生命周期中可能被重写多次
CSS 中使用 --vh 自定义属性避免 JS 反复操作 DOM
把 JS 计算出的高度存进 CSS 自定义属性，再在样式里用 calc(100vh) 替换为 calc(var(--vh))，这样既保持响应性，又避免每次 resize 都重设元素 style。
常见错误：
- 直接写
height: 100vh—— 在 Safari 中100vh会随地址栏变化剧烈抖动 - 在 JS 中反复设置
element.style.height = innerHeight + 'px'—— 触发重排，卡顿明显 - 没加
!important或 specificity 不足，导致自定义属性被其他规则覆盖
推荐写法：
:root {
--vh: 100vh; /* fallback */
}
.full-height {
height: calc(var(--vh, 100vh));
}
有些机型（比如部分安卓定制浏览器）连 visualViewport 都不支持，且 screen.height 返回的是逻辑像素而非物理像素。这种边缘情况需要靠 UA 检测 + 手动白名单兜底，但多数项目做到前三个层级已覆盖 95% 以上真实用户。
