移动端Web开发：键盘弹出时如何保持Header固定？

这个问题我在做移动端项目时踩过不少坑，尤其是不同系统（iOS/Android）和浏览器的表现差异特别磨人，分享几个亲测有效的解决方案：

方案1：监听视口高度变化，动态调整定位逻辑 #

软键盘弹出时，浏览器的视口高度会明显缩小，我们可以通过监听resize事件判断键盘状态，再调整header的样式：

let originalHeight = window.innerHeight;

window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight;
  const header = document.querySelector('.header');
  
  // 视口高度骤降大概率是键盘弹出
  if (currentHeight < originalHeight * 0.8) {
    header.classList.add('keyboard-active');
  } else {
    header.classList.remove('keyboard-active');
    originalHeight = currentHeight;
  }
});

对应的CSS：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

/* 键盘弹出时切换为absolute，基于文档流顶部固定 */
.header.keyboard-active {
  position: absolute;
  top: 0;
}

注意：部分Android浏览器可能不会触发resize，可结合输入框的focus/blur事件补充判断。

方案2：用position: sticky替代fixed #

如果项目不需要兼容过老设备，sticky是更省心的选择——它兼具relative和fixed的特性，元素在视口内时随文档流滚动，到达边缘后自动固定：

.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #fff; /* 必须加背景色，避免被下方内容穿透 */
}

避坑提示：sticky元素的父容器不能设置overflow: hidden，否则会直接失效；iOS 11及以下版本对sticky的支持有小bug，需要测试验证。

方案3：针对iOS Safari的特殊修复 #

iOS Safari在键盘弹出时会向上推送页面，导致fixed元素偏移，可结合焦点事件和滚动处理：

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

inputs.forEach(input => {
  input.addEventListener('focus', () => {
    // 延迟滚动到顶部，确保header留在视野内
    setTimeout(() => window.scrollTo(0, 0), 100);
    // 临时禁止页面滚动，避免用户误操作导致header错位
    document.body.style.overflow = 'hidden';
  });
  
  input.addEventListener('blur', () => {
    // 键盘收起后恢复页面滚动
    document.body.style.overflow = 'auto';
  });
});

注意：如果页面本身需要滚动，禁止overflow可能影响体验，可根据实际场景调整。

方案4：优化Viewport基础设置 #

确保页面的meta viewport配置正确，这是解决移动端定位问题的基础：

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

viewport-fit=cover能让页面占满整个屏幕，避免某些场景下视口计算错误导致的定位偏差。

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