iOS Safari软键盘弹出时如何保持底部HTML固定元素可见？

这个问题确实是iOS Safari长期以来的一个“小坑”，和Chrome的行为差异主要是因为两者处理软键盘弹出时的视口逻辑不一样——Chrome会主动调整视口高度，而iOS Safari更倾向于保持原视口，只滚动页面内容，导致fixed定位的底部元素被键盘覆盖。下面给你几个亲测有效的解决思路：

方案一：监听键盘弹出/收起，动态调整底部元素位置 #

这是最常用的兼容方案，核心思路是通过输入框的焦点事件结合窗口高度变化，计算出键盘高度，然后动态调整底部元素的位置。

具体实现步骤： #

• 先获取底部固定元素和页面中的输入控件
• 记录初始的窗口可视高度
• 监听输入框的focusin事件，当键盘弹出时，计算窗口高度的变化值（也就是键盘高度），然后给底部元素设置对应的偏移量
• 监听focusout事件，当键盘收起时恢复底部元素的原始位置

示例代码：

const bottomBar = document.querySelector('.fixed-bottom');
const inputs = document.querySelectorAll('input, textarea');
let originalWindowHeight = window.innerHeight;

// 防抖函数，避免频繁触发
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  }
}

function adjustBottomBar() {
  const currentHeight = window.innerHeight;
  const keyboardHeight = originalWindowHeight - currentHeight;
  // 如果高度差大于100，判断为键盘弹出（避免小幅度窗口变化误判）
  if (keyboardHeight > 100) {
    bottomBar.style.bottom = `${keyboardHeight}px`;
  } else {
    bottomBar.style.bottom = '0px';
  }
}

// 监听输入框聚焦
inputs.forEach(input => {
  input.addEventListener('focusin', () => {
    originalWindowHeight = window.innerHeight;
    // 使用requestAnimationFrame确保准确获取高度变化
    requestAnimationFrame(() => {
      debounce(adjustBottomBar, 100)();
    });
  });
  
  input.addEventListener('focusout', () => {
    debounce(() => {
      bottomBar.style.bottom = '0px';
      originalWindowHeight = window.innerHeight;
    }, 100)();
  });
});

// 同时监听窗口resize事件，处理键盘高度变化的情况
window.addEventListener('resize', debounce(adjustBottomBar, 100));

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

如果你的页面结构允许，可以尝试把底部元素的定位从fixed改成sticky，让它“粘”在页面底部，当页面滚动时自动跟随。不过这个方案需要注意：

• 底部元素的父容器需要足够高，至少要覆盖整个视口高度
• 要设置bottom: 0来让它固定在底部

示例CSS：

.sticky-bottom {
  position: -webkit-sticky; /* 兼容iOS Safari */
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 100;
}

这个方案的局限性是如果页面内容不足以撑满视口，sticky元素可能不会固定在底部，所以需要确保页面最小高度是100vh。

方案三：调整视口Meta标签（辅助优化） #

确保你的页面视口设置正确，这能减少一些奇怪的兼容问题：

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

viewport-fit=cover可以让页面内容覆盖整个屏幕，避免安全区域的影响，配合上面的方案一起使用效果更好。

需要注意的是，iOS不同版本的行为可能略有差异，建议多测试几个版本的Safari，优先用方案一，因为它的兼容性和灵活性最好。

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