我之前也踩过iOS 11 web app横竖屏切换后标题栏重叠内容的坑，折腾了好几个测试设备才摸出几个实用的修复方案，分享给你：

1. 明确配置Viewport并监听旋转动态调整高度 #

iOS 11在横竖屏切换时，经常会出现视口高度计算异常的情况。你可以先给viewport标签加上viewport-fit=cover，确保视口能覆盖整个屏幕：

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

再配合JS监听屏幕旋转事件，延迟一点时间后强制设置根元素高度，让浏览器重新计算布局：

window.addEventListener('orientationchange', () => {
  // 加100ms延迟是等iOS完成旋转后的布局初始化
  setTimeout(() => {
    document.documentElement.style.height = `${window.innerHeight}px`;
  }, 100);
});

2. 隐藏系统默认标题栏（业务允许的话） #

如果你的web app不需要保留系统默认标题栏，可以直接通过meta标签隐藏它，从根源解决重叠问题：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

注意black-translucent会让状态栏透明，页面内容会延伸到状态栏区域，所以要给页面顶部加个适配padding，比如：

body {
  padding-top: env(safe-area-inset-top);
}

env(safe-area-inset-top)会自动适配不同设备的状态栏高度，比写固定值更靠谱。

3. 动态调整内容的顶部内边距 #

在页面加载和旋转完成后，计算状态栏的实际高度，给页面内容添加对应的顶部内边距，确保内容不会被标题栏覆盖：

function adjustContentOffset() {
  // 计算状态栏高度：屏幕总高度 - 视口高度
  const statusBarHeight = window.screen.height - window.innerHeight;
  document.body.style.paddingTop = `${statusBarHeight}px`;
}

// 初始化时执行一次
window.addEventListener('load', adjustContentOffset);
// 旋转时重新计算
window.addEventListener('orientationchange', adjustContentOffset);

4. 强制触发页面重绘 #

有时候iOS的渲染引擎会“偷懒”不更新布局，这时候可以用一个小技巧强制触发重绘：

window.addEventListener('orientationchange', () => {
  const root = document.documentElement;
  // 临时隐藏根元素
  root.style.display = 'none';
  // 立即恢复，触发重绘
  setTimeout(() => {
    root.style.display = '';
  }, 0);
});

这个方法简单粗暴，但在很多iOS布局异常的场景下都能生效。

另外提一句：苹果对iOS 11这类旧系统的Bug修复优先级极低，你提交的Bug Reporter大概率不会有回复，所以还是靠前端兼容方案更实在。

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