解决Android键盘唤起上推页面问题：实现键盘覆盖内容

问题描述 #

Android设备上激活输入框后，软键盘弹出会将页面内容上推，需求是让软键盘直接覆盖页面内容而非上推页面。已知该问题由Android端viewport高度变化导致，但暂未找到修复方案。

原始代码 #

<style>
body{
Height:100vh;
Width:100vw;
}
.abc{
Height:20%;
Width:100%;
Border:solid blue;
}
.def{
Height:20%;
Width:100%;
Border:solid green;
}
</style>
<body>
<div class="abc">
<input type="text">
</div>
<div class="def">
<p>Fix Me plz</p>
</div>
</body>

修复方案 #

方案1：调整Viewport Meta标签 #

在HTML的<head>中添加或修改viewport标签，固定viewport高度为设备物理高度，避免软键盘弹出时改变viewport尺寸：

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

该设置会让页面高度锁定在设备初始高度，软键盘弹出时直接覆盖页面底部内容，不会触发页面上推。

方案2：JavaScript动态固定页面高度 #

通过监听窗口 resize 事件，在软键盘弹出时固定页面高度，阻止页面滚动上推：

// 记录初始窗口高度
const initialWindowHeight = window.innerHeight;

window.addEventListener('resize', () => {
  // 窗口高度变小，判定为软键盘弹出
  if (window.innerHeight < initialWindowHeight) {
    document.body.style.height = `${initialWindowHeight}px`;
    document.body.style.overflow = 'hidden';
  } else {
    // 软键盘收起，恢复页面默认样式
    document.body.style.height = '';
    document.body.style.overflow = '';
  }
});

方案3：CSS固定页面容器高度 #

修改CSS，将页面根元素高度设置为固定值，同时避免元素因边框溢出：

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁止页面滚动 */
}
.abc, .def {
  height: 20%;
  width: 100%;
  box-sizing: border-box; /* 包含边框在内计算元素高度 */
}
.abc {
  border: solid blue;
}
.def {
  border: solid green;
}

如果页面需要滚动，可将overflow:hidden改为overflow:auto，但需配合方案1的viewport设置，确保滚动区域高度不受软键盘影响。

注意事项 #

• 不同Android浏览器（如Chrome、微信内置浏览器）对viewport的处理可能有差异，建议多机型测试；
• 若页面包含长列表或需滚动内容，优先使用方案1+方案2的组合，既固定viewport又动态处理滚动逻辑；
• 避免同时使用100vh和动态高度设置，100vh在Android端会随软键盘弹出而改变，推荐使用100%或固定像素值。

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