动态修正底部遮挡，window.innerHeight应用技巧

移动端开发中，`window.innerHeight` 在 iOS Safari 和 Chrome 中会因地址栏收起/展开而剧烈波动，导致底部按钮、输入框等被意外遮挡；文章指出应优先采用更稳定的 `visualViewport.height` 并监听 `visualviewport.resize` 事件来精准响应真实可视区域变化，辅以 `screen.height` 结合方向判断与经验偏移量的降级策略，并通过 CSS 自定义属性 `--vh` 实现高性能、无抖动的全高布局——这一方案兼顾兼容性、性能与体验，是解决移动端视口高度不可靠问题的现代实践标准。

移动端 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% 以上真实用户。

今天关于《动态修正底部遮挡，window.innerHeight应用技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！