如何在100vh/dvh的移动端Safari交互应用中隐藏地址栏？

问题背景 #

移动端Safari的地址栏默认尺寸较大，仅当页面发生滚动时才会自动隐藏。但对于采用100vh/dvh固定布局的交互类应用（比如全屏工具、轻量游戏），页面本身没有滚动空间，无法触发地址栏的自动隐藏逻辑。现有临时方案是初始化115vh布局并提示用户滚动，再通过scrollTo(0,0)修正布局，但这种方式依赖用户操作且稳定性不足。

可靠解决方案 #

方案1：自动触发滚动+布局锁定

核心思路：先给页面设置可滚动的最小空间，主动触发微小滚动让Safari隐藏地址栏，随后锁定布局为100dvh，避免地址栏重新出现。

/* 初始状态：让页面具备可滚动条件 */
body {
  height: 100vh;
  overflow-y: auto;
  margin: 0;
}

/* 锁定状态：固定布局，禁止滚动 */
body.address-bar-hidden {
  height: 100dvh;
  overflow-y: hidden;
}

let isBarHidden = false;

function handleScrollTrigger() {
  if (!isBarHidden && window.pageYOffset > 0) {
    // 滚动到顶部，锁定布局
    window.scrollTo(0, 0);
    document.body.classList.add('address-bar-hidden');
    isBarHidden = true;
    // 移除监听，避免重复触发
    window.removeEventListener('scroll', handleScrollTrigger);
  }
}

window.addEventListener('scroll', handleScrollTrigger);

// 页面加载后主动触发微小滚动，触发地址栏隐藏
window.addEventListener('load', () => {
  setTimeout(() => window.scrollBy(0, 1), 100);
});

优点：无需用户主动操作，自动完成，兼容性覆盖绝大多数iOS版本；缺点：依赖Safari的滚动触发逻辑，极端情况下可能需要调整延时。

方案2：利用视觉视口API精准适配

Safari从iOS 13开始支持visualViewport API，能直接获取地址栏隐藏后的实际可用视口高度，动态调整布局。

function syncViewportHeight() {
  const viewport = window.visualViewport;
  if (!viewport) return;
  
  // 设置body高度为视觉视口高度（地址栏隐藏后的真实高度）
  document.body.style.height = `${viewport.height}px`;
  document.body.style.overflowY = 'hidden';
}

window.addEventListener('load', () => {
  // 先触发滚动让地址栏隐藏
  window.scrollBy(0, 1);
  // 等待地址栏完成隐藏后同步视口
  setTimeout(syncViewportHeight, 200);
  
  // 监听视口变化，防止地址栏因意外操作重新显示
  viewport?.addEventListener('resize', syncViewportHeight);
});

优点：精准匹配实际可用空间，适配动态视口变化；缺点：仅支持iOS 13及以上版本。

方案3：全屏API实现沉浸式隐藏

通过请求浏览器全屏模式，强制Safari隐藏地址栏和工具栏，适合需要完全沉浸式体验的应用（需用户交互触发）。

// 绑定到用户交互元素（如启动按钮）
document.querySelector('.enter-fullscreen').addEventListener('click', async () => {
  try {
    await document.documentElement.requestFullscreen();
    // 全屏后设置固定布局
    document.body.style.height = '100vh';
  } catch (err) {
    console.error('全屏请求失败:', err);
  }
});

// 退出全屏时恢复布局
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    document.body.style.height = '100dvh';
  }
});

优点：彻底隐藏系统UI，沉浸式体验拉满；缺点：必须通过用户主动操作触发（如点击），无法自动执行。

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