iOS Safari弹出键盘时如何保持头部固定在顶部不安全区域？

核心问题 #

iOS Safari 弹出键盘时会调整window.innerHeight，导致position: fixed的头部元素脱离原本的不安全区域定位，加上black-translucent状态栏的白色文字与网页白色背景冲突，造成可读性问题。以下是几个可行的解决技巧：

方法1：监听可视区域变化，强制固定头部位置

利用visualViewport API 精准捕捉键盘弹出/收起的状态，动态修正头部的top值：

const header = document.querySelector('.fixed-header');
// 保存初始的top配置（通常是env(safe-area-inset-top)）
const initialTop = getComputedStyle(header).top;

// 监听可视区域尺寸变化
window.visualViewport.addEventListener('resize', () => {
  // 通过innerHeight和可视区域高度的差值判断键盘是否弹出
  const isKeyboardActive = window.innerHeight < window.visualViewport.height;
  if (isKeyboardActive) {
    // 强制头部固定在不安全区域顶部
    header.style.top = 'env(safe-area-inset-top)';
  } else {
    // 键盘收起后恢复初始定位
    header.style.top = initialTop;
  }
});

前置要求：头部需提前设置position: fixed; left: 0; right: 0，初始top值使用env(safe-area-inset-top)适配设备不安全区域。

方法2：用position: sticky替代fixed（场景受限但更稳定）

如果页面没有多层滚动容器，可将头部的定位方式改为sticky，iOS Safari 对这种定位的键盘适配更友好：

.fixed-header {
  position: sticky;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  /* 保留原有背景、高度等样式 */
}

局限性：页面存在嵌套滚动容器时，sticky的表现可能不符合预期，需实际测试验证。

方法3：锁定页面滚动区域，避免布局挤压

当输入框获得焦点时，固定页面高度并禁止滚动，减少键盘弹出时的布局偏移：

const inputElements = document.querySelectorAll('input, textarea');

inputElements.forEach(input => {
  input.addEventListener('focus', () => {
    document.body.style.height = '100vh';
    document.body.style.overflow = 'hidden';
  });
  
  input.addEventListener('blur', () => {
    document.body.style.height = '';
    document.body.style.overflow = '';
  });
});

配合头部的position: fixed; top: env(safe-area-inset-top)，可大幅降低头部偏移概率。

额外 fallback：临时状态栏遮罩

若上述方法仍有偶发问题，可添加一个与头部同色的顶部遮罩，在键盘弹出时显示，确保白色状态栏文字可见：

.status-bar-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background-color: #你的头部背景色;
  display: none;
  z-index: 999;
}

结合之前的监听逻辑显示/隐藏遮罩：

window.visualViewport.addEventListener('resize', () => {
  const mask = document.querySelector('.status-bar-mask');
  mask.style.display = window.innerHeight < window.visualViewport.height ? 'block' : 'none';
});

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