如何用 window.innerHeight 动态计算移动端全屏容器的真实高度-js教程-PHP中文网

ios safari 中 window.innerheight 不准是因为地址栏/工具栏伸缩会动态改变该值，导致全屏容器闪动；应优先用 visualviewport.height 并监听其 resize 事件，旧版 ios 则需 orientationchange + 延迟测量兜底。

如何用 window.innerheight 动态计算移动端全屏容器的真实高度

为什么 `window.innerHeight` 在 iOS Safari 里经常“不准”

因为 Safari 移动版会把地址栏、底部工具栏的展开/收起状态算进 window.innerHeight，页面滚动时这个值会动态变化。用户刚打开页面时地址栏显示，window.innerHeight 偏小；往下滚一截后地址栏隐藏，值突然变大——导致全屏容器闪动或留白。

用 `visualViewport` 替代 `window.innerHeight` 获取稳定视口高度

visualViewport 是更现代、更可靠的 API，它反映用户当前“真正看到”的区域，不受地址栏伸缩干扰（iOS 15.4+、Android Chrome 支持良好）。关键在于监听它的 resize 和 scroll 事件，而不是只读一次。

实操建议：

优先检查 visualViewport 是否存在，存在则用 visualViewport.height
监听 visualViewport.addEventListener('resize', handler)，每次触发都更新容器高度
不要在 DOMContentLoaded 里一次性赋值，要持续响应变化

示例：

if ('visualViewport' in window) {
  const updateHeight = () => {
    document.documentElement.style.setProperty('--vh', `${visualViewport.height}px`);
  };
  visualViewport.addEventListener('resize', updateHeight);
  updateHeight(); // 初始化
}

兜底方案：iOS 旧版本必须用 `orientationchange` + 延迟测量

对于不支持 visualViewport 的老 iOS（如 iOS 12–14），只能靠经验性补偿。核心思路是：等地址栏稳定后再测，且区分横竖屏。

常见错误现象：window.innerHeight 在 load 或 DOMContentLoaded 时取值，结果比实际可视区小 60–80px。

实操建议：

监听 window.addEventListener('orientationchange', ...) 和 window.addEventListener('resize', ...)
触发后用 setTimeout(..., 100) 延迟读取，避开 Safari 地址栏动画中间态
横屏时直接用 window.innerHeight，竖屏时可加 60px 补偿（需按机型微调）
避免用 document.documentElement.clientHeight，它在缩放或 zoom 下不可靠