Chrome iOS伪全屏功能已被移除，咨询原实现及相关技术问题

我之前也帮不少团队处理过类似的适配问题，关于Chrome iOS移除的这个伪全屏特性，给你梳理下核心细节和可行的替代方案：

一、原伪全屏功能的技术细节 #

早期Chrome iOS的这个伪全屏，本质是浏览器的滚动触发式UI自动隐藏机制：

• 用户向下滚动页面时，浏览器会自动收起顶部地址栏和底部工具栏，仅保留内容区域，实现“伪全屏”效果；
• 这个状态会在用户整个会话内持续，直到用户主动向上滚动、点击浏览器UI（比如地址栏）才会恢复；
• 最关键的是，用户导航到同域其他页面时，浏览器UI会保持隐藏状态，让整个会话的内容展示空间最大化。

Chrome后来移除这个特性，主要是为了统一移动端浏览器的交互逻辑，对齐iOS系统的交互规范（比如Safari的滚动隐藏不会跨页面保持），同时避免误触发、提升用户对浏览器UI的可控性。

二、可行的替代方案 #

1. 使用标准全屏API实现真全屏

现在只能通过用户主动交互触发标准的全屏模式，这是目前最接近原效果的方案，但需要用户手动触发（比如点击页面内的“全屏”按钮）：

// 给页面内的全屏按钮绑定触发事件
document.querySelector('.fullscreen-trigger').addEventListener('click', async () => {
  const targetElement = document.documentElement;
  try {
    if (targetElement.requestFullscreen) {
      await targetElement.requestFullscreen();
    } else if (targetElement.webkitRequestFullscreen) {
      // 兼容webkit内核（Chrome iOS基于webkit）
      await targetElement.webkitRequestFullscreen();
    }
  } catch (err) {
    console.error('全屏请求失败:', err);
  }
});

这个方案会完全隐藏浏览器UI和系统状态栏，用户可以通过手势（比如从顶部向下滑动）退出全屏；缺点是页面跳转后需要重新触发，没法跨页面保持状态。

2. 优化布局，最大化可用视口空间

既然没法跨页面保持UI隐藏，那就从页面布局入手，尽量利用所有可用空间：

• 配置正确的viewport元标签，启用viewport-fit=cover适配刘海屏和底部安全区：

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

• 实现滚动动态隐藏导航栏：页面向下滚动时隐藏顶部导航，向上滚动时显示，模拟原伪全屏的空间利用效果：

  let lastScrollTop = 0;
  const navbar = document.querySelector('.top-navbar');
  
  window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
      // 向下滚动，隐藏导航栏
      navbar.style.transform = 'translateY(-100%)';
      navbar.style.transition = 'transform 0.3s ease';
    } else {
      // 向上滚动，显示导航栏
      navbar.style.transform = 'translateY(0)';
    }
    lastScrollTop = scrollTop;
  });
  

3. 页面加载时触发临时UI隐藏

针对Chrome iOS当前的滚动行为（滚动时临时隐藏地址栏），可以在页面加载完成后自动滚动一小段距离，触发地址栏隐藏：

window.addEventListener('load', () => {
  // 平滑滚动1px，触发浏览器UI隐藏
  window.scrollBy({ top: 1, behavior: 'smooth' });
});

注意：这个方法的可靠性依赖浏览器当前实现，部分情况下可能会被浏览器的自动滚动限制拦截；而且用户向上滚动时UI会重新显示，没法跨页面保持，但能在单个页面加载时最大化视口。

总结 #

目前没有完全替代早期伪全屏的方案，因为Chrome iOS已经彻底移除了跨会话保持UI隐藏的特性。建议结合标准全屏API和布局优化的方式，根据业务场景选择最合适的方案，尽量接近原有的用户体验。

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