如何用JavaScript在iOS 16 Safari中按需隐藏完整浏览器工具栏？

需要在横屏模式下实现类似Safari「隐藏工具栏」的类全屏效果，视频被固定不可滚动的容器包裹，常规window.scrollTo(0,1)和CSS方案无效，且无法使用原生<video>全屏（需自定义控件）。以下是可行的解决方案：

方案1：利用window.visualViewport API（iOS Safari 13+） #

iOS Safari的visualViewport可直接操作视口偏移，无需依赖文档滚动，适配固定容器场景：

// 监听横屏切换事件
window.addEventListener('orientationchange', handleOrientationChange);

function handleOrientationChange() {
  if (window.orientation === 90 || window.orientation === -90) {
    // 横屏状态下延迟调整视口，确保布局稳定
    setTimeout(() => {
      if (window.visualViewport) {
        // 偏移1px触发工具栏折叠
        window.visualViewport.scrollTo(0, 1);
        // 让视频容器占满当前视口高度
        document.querySelector('.video-container').style.height = `${window.visualViewport.height}px`;
      }
    }, 300);
  }
}

配合viewport meta标签确保视口适配：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

注意：该API支持iOS Safari 13及以上版本，Chrome移动端也已兼容。

方案2：临时解除容器固定，触发滚动后恢复 #

核心是临时让文档产生可滚动空间，触发浏览器工具栏隐藏逻辑后，再恢复容器固定状态：

function enterFakeFullscreen() {
  const videoContainer = document.querySelector('.video-container');
  // 保存容器原有样式
  const originalStyle = {
    position: videoContainer.style.position,
    height: videoContainer.style.height
  };

  // 临时解除固定，给body设置足够高度让文档可滚动
  videoContainer.style.position = 'absolute';
  document.body.style.height = `${screen.height * 1.1}px`;

  // 触发滚动隐藏工具栏
  setTimeout(() => {
    window.scrollTo(0, 1);
    // 延迟恢复容器状态，确保工具栏已折叠
    setTimeout(() => {
      videoContainer.style.position = originalStyle.position;
      videoContainer.style.height = `${window.innerHeight}px`;
      document.body.style.height = 'auto';
    }, 500);
  }, 300);
}

// 横屏切换时调用全屏函数
window.addEventListener('orientationchange', () => {
  if (window.orientation === 90 || window.orientation === -90) {
    enterFakeFullscreen();
  }
});

注意：需确保视频容器的z-index足够高，避免恢复固定后被其他元素遮挡。

方案3：PWA模式下的原生全屏（可选） #

如果你的应用是PWA，可通过Web App Manifest配置，让用户添加到主屏幕后进入真正的全屏模式：

{
  "display": "standalone",
  "orientation": "landscape",
  "background_color": "#000000"
}

这种模式下浏览器工具栏会完全隐藏，直接获得类原生应用的全屏体验。

为什么之前的方法无效？ #

当视频容器设置为position: fixed时，文档的滚动区域被容器覆盖，window.scrollTo操作的是文档而非视口，无法触发浏览器的工具栏折叠逻辑——浏览器需要检测到文档内容的滚动行为才会自动隐藏工具栏。

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