iOS端PWA从外部链接返回后innerHeight异常问题求助

这是Safari PWA模式下的已知布局bug，支付网关跳转返回后，浏览器未正确重新计算视口高度，导致底部空白。以下是几种强制Safari更新innerHeight的可行方案：

方案1：动态修改viewport触发重绘 #

通过临时修改viewport元标签的content属性，迫使Safari重新解析视口参数：

const viewportMeta = document.querySelector('meta[name="viewport"]');
if (!viewportMeta) return;

const originalContent = viewportMeta.content;
// 临时添加height=device-height触发重计算
viewportMeta.content = `${originalContent}, height=device-height`;
// 立即恢复原配置，避免影响正常布局
setTimeout(() => {
  viewportMeta.content = originalContent;
}, 0);

方案2：手动触发resize事件并配合高度重置 #

单纯触发resize事件有时就能唤醒浏览器的布局计算，若无效可结合body高度临时修改：

// 基础版本：触发resize事件
const resizeEvent = new Event('resize');
window.dispatchEvent(resizeEvent);

// 进阶版本：配合高度修改增强效果
const originalBodyHeight = document.body.style.height;
document.body.style.height = '100vh';
window.dispatchEvent(resizeEvent);
setTimeout(() => {
  document.body.style.height = originalBodyHeight;
}, 0);

方案3：安全区域适配重置 #

若空白区域和iOS安全区域（safe-area-inset-bottom）相关，可通过CSS+JS强制适配：

/* 全局基础样式确保视口占满 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

function resetSafeAreaHeight() {
  // 获取安全区域底部高度
  const safeAreaBottom = parseInt(getComputedStyle(document.body).paddingBottom) || 0;
  // 强制设置body最小高度并触发重绘
  document.body.style.minHeight = `calc(100vh - ${safeAreaBottom}px)`;
  window.dispatchEvent(new Event('resize'));
}

// 在支付网关返回后的回调中调用
resetSafeAreaHeight();

方案4：极端情况：滚动触发布局更新 #

如果前三种方法无效，可通过滚动页面触发浏览器重新计算视口：

const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 滚动到底部
window.scrollTo(0, document.body.scrollHeight);
// 100ms后滚回原位置，避免用户感知
setTimeout(() => {
  window.scrollTo(0, scrollTop);
}, 100);

建议优先尝试方案1和方案2，实现简单且副作用最小；若涉及安全区域适配问题，使用方案3；极端场景下再用方案4。

内容的提问来源于stack exchange，提问作者amir hossein razavi