React PWA在iOS中用window.location.assign后高度异常如何修复？

问题原因 #

iOS Safari环境下的PWA，通过window.location.assign跳转页面时，会错误保留浏览器导航栏的高度计算逻辑，导致返回原页面后无法恢复全屏高度。

可行修复方案 #

• 改用history.pushState替代location.assign
  原生跳转触发的Safari导航行为是高度异常的诱因，改用history.pushState可在不刷新页面的前提下更新URL，规避该问题。示例代码：

  // 替换原跳转逻辑
  history.pushState({}, '', '/target-page');
  // 自行处理页面内容更新（比如DOM操作或框架路由渲染）
  

• 强制重置视口与全屏状态
  确保视口标签包含viewport-fit=cover，并在页面加载/返回时重新请求全屏：

  1. 确认视口元标签配置：

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

  2. 添加全屏重置逻辑：

     function resetFullscreen() {
       const root = document.documentElement;
       // 兼容iOS全屏API
       if (root.requestFullscreen) {
         root.requestFullscreen();
       } else if (root.webkitRequestFullscreen) {
         root.webkitRequestFullscreen();
       }
       // 强制同步根元素与窗口高度
       root.style.height = `${window.innerHeight}px`;
       document.body.style.height = `${window.innerHeight}px`;
     }
     // 页面显示时触发（含从跳转页面返回场景）
     window.addEventListener('pageshow', resetFullscreen);
     

• 监听页面显示事件，动态调整高度
  在pageshow事件中重新计算并强制设置页面高度，覆盖错误的高度值：

  window.addEventListener('pageshow', () => {
    const fullHeight = window.innerHeight;
    document.documentElement.style.minHeight = `${fullHeight}px`;
    document.body.style.minHeight = `${fullHeight}px`;
  });
  

  配合基础CSS样式：

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
  }
  

• 使用单页应用路由
  若你的PWA是单页应用，直接使用框架自带路由（如Vue Router、React Router）处理页面切换，这类路由内部基于historyAPI实现，不会触发iOS的高度计算bug。

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