移动端Safari键盘弹出时用jQuery调整窗口布局的解决方案求助

核心问题原因 #

移动端Safari在键盘弹出时，不会自动更新传统视口单位（如vh）的计算值，仍以初始屏幕高度为准；同时默认会自动滚动页面让输入框处于可视区域，导致Header和部分Content被顶出视口。键盘弹出后页面底部出现空白，也是因为浏览器未重新计算可用视口高度。

简洁有效解决方案 #

方案1：使用CSS新视口单位svh（推荐，现代浏览器支持）

svh（Small Viewport Height）会自动适配当前可视视口高度（包括键盘弹出后的高度），无需JS干预即可实现Content高度动态适配。

代码示例：

<!-- HTML结构 -->
<div class="app-container">
  <header class="app-header">Header</header>
  <main class="app-content">动态内容区域</main>
  <footer class="app-footer">
    <input type="text" placeholder="输入内容">
  </footer>
</div>

/* CSS布局 */
.app-container {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-header {
  height: 60px;
  position: sticky;
  top: 0;
  background: #fff;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-footer {
  height: 80px;
  position: sticky;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.app-footer input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

说明：svh目前支持iOS 15.4+、Android Chrome 98+，若需兼容更低版本iOS，可结合方案2做降级处理。

方案2：监听visualViewport变化（兼容旧版iOS）

利用浏览器visualViewport API监听可视视口高度变化，手动调整Content区域高度，同时禁止页面自动滚动。

代码示例（基于方案1的CSS补充JS）：

const contentEl = document.querySelector('.app-content');
const headerEl = document.querySelector('.app-header');
const footerEl = document.querySelector('.app-footer');

// 监听可视视口高度变化
window.visualViewport.addEventListener('resize', () => {
  const availableHeight = window.visualViewport.height - headerEl.offsetHeight - footerEl.offsetHeight;
  contentEl.style.height = `${availableHeight}px`;
});

// 禁止输入框聚焦时页面自动滚动
document.querySelector('.app-footer input').addEventListener('focus', (e) => {
  // 手动将输入框滚动到可视区域
  e.target.scrollIntoView({ behavior: 'smooth', block: 'center' });
});

说明：visualViewport API支持iOS 13+，能准确获取键盘弹出后的可视高度，解决传统视口单位不更新的问题。

额外注意事项 #

• 不要给body或html设置overflow: hidden，否则会导致iOS滚动失效；
• 优先用position: sticky配合flex布局固定头尾，比position: fixed更稳定；
• 需在真实iOS设备上测试，模拟器可能存在偏差。

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