iOS Safari聚焦输入框时DOM外注入空白空间问题求助

问题说明 #

iOS Safari中点击输入框聚焦后，页面底部会出现一块不属于网页DOM的≈150px空白区域，仅在输入框聚焦状态下可滚动。常规调整body/html高度、使用SVH或JS计算视口高度的方案无效，因为该空白是浏览器自身注入的，不属于DOM范围。

可行解决方案 #

方案1：聚焦时强制输入框定位到可视区域

通过scrollIntoView强制输入框滚动到可视区域顶部，配合固定页面滚动位置，避免浏览器自动调整视口产生空白：

const inputElements = document.querySelectorAll('input, textarea');
inputElements.forEach(input => {
  input.addEventListener('focus', () => {
    input.scrollIntoView({ behavior: 'instant', block: 'start' });
    window.scrollTo(0, window.scrollY);
  });
});

方案2：聚焦时锁定页面滚动

输入框聚焦时临时将body设为固定定位，记录并恢复滚动位置，彻底阻止浏览器的视口调整行为：

.lock-body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

inputElements.forEach(input => {
  input.addEventListener('focus', () => {
    scrollPosition = window.scrollY;
    document.body.classList.add('lock-body');
    document.body.style.top = `-${scrollPosition}px`;
  });

  input.addEventListener('blur', () => {
    document.body.classList.remove('lock-body');
    window.scrollTo(0, scrollPosition);
  });
});

方案3：优化视口设置+动态视口高度

通过视口元标签配合dvh（动态视口高度），减少浏览器自动调整视口的空间：

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

html, body {
  height: 100dvh;
  overflow: auto;
}

dvh会随iOS Safari的动态视口变化实时调整，比svh更适配输入框聚焦时的视口变化场景。

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