如何处理iOS 15.0.1 Safari折叠/最小化地址/URL/域名栏适配问题

解决方案 #

基础说明

你此前添加viewport-fit=cover的配置是正确的，env(safe-area-inset-bottom)返回0属于预期行为：该CSS变量仅对应设备物理安全区（刘海、底部手势条的避让区域），Safari折叠域名栏不属于系统安全区范畴，因此无法通过该变量获取高度。

以下是可直接落地的适配方案： #

方案1：使用VisualViewportAPI动态计算可用视口高度（推荐）

该API专门用于获取排除浏览器UI（地址栏、工具栏）后的实际可视区域尺寸，完美适配Safari地址栏折叠/展开的场景：

1. 添加JS逻辑动态注入CSS高度变量

// 防抖计时器
let vhUpdateTimer = null;
// 计算并设置实际可用高度
function updateValidViewportHeight() {
  if (window.visualViewport) {
    document.documentElement.style.setProperty('--valid-vh', `${window.visualViewport.height}px`);
    return;
  }
  // 不支持API的老旧设备降级逻辑
  const fallbackVh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--valid-vh', `${fallbackVh}px`);
}
// 初始化执行
updateValidViewportHeight();
// 监听地址栏状态变化、屏幕旋转、窗口大小变化
window.visualViewport?.addEventListener('resize', updateValidViewportHeight);
window.addEventListener('resize', () => {
  clearTimeout(vhUpdateTimer);
  vhUpdateTimer = setTimeout(updateValidViewportHeight, 100);
});

2. 业务代码中替换原有高度写法
   将原有的height: 100vh替换为height: calc(var(--valid-vh, 1vh) * 100)，即可保证容器高度始终等于当前页面实际可视高度，不会被折叠栏遮挡。

方案2：单独获取折叠栏高度做自定义偏移

如果需要单独拿折叠栏高度做针对性调整，可通过以下逻辑动态计算，无需硬编码22px这类固定值，自动适配所有设备：

function getSafariFoldBarHeight() {
  if (!window.visualViewport) return 0;
  // 读取底部安全区高度
  const safeAreaBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)')) || 0;
  // 竖屏场景下计算折叠栏高度，横屏场景可自行调整判断逻辑
  return window.innerHeight - window.visualViewport.height - safeAreaBottom;
}

额外适配建议

• 不需要修改现有viewport配置，保留viewport-fit=cover即可
• 全屏展示的元素可额外添加padding-bottom: env(safe-area-inset-bottom)，同时兼容底部手势条和折叠栏的避让需求
• 不要硬编码固定高度值，不同iOS版本、不同设备的折叠栏高度差异极大，硬编码会引发多设备适配问题

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