Safari下拉刷新时window.innerHeight计算值较正常刷新偏低60px求助

方案1：使用visualViewport获取准确可视高度 #

iOS Safari下拉刷新过程中，window.innerHeight会因临时工具栏状态偏差出现计算错误，而window.visualViewport能实时返回当前实际可视的视口高度，不受这种临时状态影响。

实现代码：

function setBannerHeight() {
  const banner = document.querySelector('.fullscreen-banner');
  if (!banner) return;
  // 优先使用visualViewport，兼容不支持的设备回退到innerHeight
  const actualHeight = window.visualViewport?.height || window.innerHeight;
  banner.style.height = `${actualHeight}px`;
}

// 绑定必要的事件监听
window.addEventListener('load', setBannerHeight);
window.addEventListener('resize', setBannerHeight);
window.addEventListener('orientationchange', setBannerHeight);
// 监听visualViewport的尺寸变化
window.visualViewport?.addEventListener('resize', setBannerHeight);

方案2：下拉刷新完成后延迟重新计算 #

下拉刷新是短暂过渡状态，页面刷新完成后布局会重新稳定。可以监听pageshow事件（iOS下拉刷新会触发该事件），延迟100-200ms再执行高度计算，避开异常状态。

在原有事件绑定基础上添加：

window.addEventListener('pageshow', () => {
  // 延迟等待页面布局稳定
  setTimeout(setBannerHeight, 150);
});

方案3：结合CSS变量与动态修正 #

用CSS变量存储实时计算的视口高度，给横幅设置高度为该变量，同时用100vh做兜底，兼顾静态布局和动态调整：

CSS代码：

.fullscreen-banner {
  height: var(--viewport-height, 100vh);
  min-height: 100vh;
}

JS代码：

function updateViewportHeight() {
  const actualHeight = window.visualViewport?.height || window.innerHeight;
  document.documentElement.style.setProperty('--viewport-height', `${actualHeight}px`);
}

// 绑定事件执行更新
window.addEventListener('load', updateViewportHeight);
window.addEventListener('resize', updateViewportHeight);
window.addEventListener('orientationchange', updateViewportHeight);
window.visualViewport?.addEventListener('resize', updateViewportHeight);
window.addEventListener('pageshow', () => setTimeout(updateViewportHeight, 150));

最佳实践 #

优先组合方案1和方案2：用visualViewport保证日常状态下的高度准确性，同时通过pageshow延迟处理覆盖下拉刷新的特殊场景，基本能解决iOS Safari的这个异常问题。

内容的提问来源于stack exchange，提问作者user2913576