iOS Safari下固定底部输入框被键盘顶起问题求助

iOS Safari软键盘唤起时会压缩视口高度，导致position: fixed的底部元素跟随视口偏移，甚至被移出视野。以下是几种可靠的解决方案：

方案1：改用position: sticky替代fixed #

sticky定位在iOS Safari中表现更稳定，只需确保父容器高度覆盖视口，同时给内容区域添加底部内边距避免遮挡：

修改CSS：

/* 确保根元素占满视口高度 */
html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

#c {
  padding-bottom: 50px; /* 等于输入框高度，防止内容被遮挡 */
  min-height: calc(100% - 50px); /* 内容区域高度减去输入框高度 */
  overflow-y: auto; /* 内容超出时滚动 */
}

.f {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-top: 1px #ccc solid;
  z-index: 10;
  background-color: #fff;
}

原理：sticky元素会在滚动到父容器底部时固定，iOS键盘唤起时，内容滚动容器会自动适配视口，输入框始终保持在可视区域底部。

方案2：监听视口变化动态调整位置 #

通过输入框的聚焦/失焦事件和窗口resize事件，判断键盘状态并强制页面滚动到输入框位置：

添加JS代码：

const inputEl = document.querySelector('.f input');
const footerEl = document.querySelector('.f');
let originalViewportHeight = window.innerHeight;

inputEl.addEventListener('focus', () => {
  originalViewportHeight = window.innerHeight;
  
  const checkResize = () => {
    const currentHeight = window.innerHeight;
    // 视口高度大幅降低，判定为键盘唤起
    if (currentHeight < originalViewportHeight - 100) {
      footerEl.scrollIntoView({ behavior: 'smooth', block: 'end' });
    }
  };
  
  window.addEventListener('resize', checkResize);
  
  // 失焦时移除监听
  inputEl.addEventListener('blur', () => {
    window.removeEventListener('resize', checkResize);
  }, { once: true });
});

保留原fixed定位CSS即可。

原理：键盘唤起会导致window.innerHeight降低，通过监听该变化，强制页面滚动到输入框位置，避免其被移出视野。

方案3：配合viewport-fit优化fixed定位 #

针对iOS安全区域和视口特性，调整meta标签和输入框样式，同时禁止输入时页面滚动：

修改HTML的meta标签：

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

修改CSS：

.f {
  position: fixed;
  bottom: env(safe-area-inset-bottom); /* 适配iOS底部安全区域 */
  width: 100%;
  height: 50px;
  border-top: 1px #ccc solid;
  z-index: 10;
  background-color: #fff;
}

/* 输入框聚焦时禁止页面滚动 */
body.input-focused {
  overflow: hidden;
}

添加JS控制：

const inputEl = document.querySelector('.f input');

inputEl.addEventListener('focus', () => {
  document.body.classList.add('input-focused');
  // 延迟滚动确保键盘完全唤起
  setTimeout(() => {
    window.scrollTo(0, document.body.scrollHeight);
  }, 100);
});

inputEl.addEventListener('blur', () => {
  document.body.classList.remove('input-focused');
});

原理：viewport-fit=cover让页面覆盖整个屏幕，配合safe-area-inset-bottom适配底部安全区域；输入时禁止页面滚动并强制滚动到底部，确保输入框始终可见。

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