如何解决安卓手机弹出键盘顶起页面无法下拉的布局问题

问题原因 #

安卓端软键盘弹出时默认会压缩Webview的可视视口高度，你当前代码中.demo容器使用position: fixed + 上下左右锚定0的写法，会跟随视口高度被同步压缩，而内部表单固定为500px高度，超出压缩后容器高度的部分无法滚动，就会出现页面被顶起、无法操作的问题。iOS软键盘为悬浮层级，不会修改视口高度，因此表现正常。

CSS 解决方案（优先推荐，无需JS） #

修改现有样式即可适配绝大多数现代移动端浏览器：

第一步：重置基础样式 #

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

第二步：修改.demo容器样式 #

.demo{
  background-color: #f9cf5a;
  /* 移除原有的fixed定位和top/right/bottom/left锚定配置 */
  min-height: 100dvh; /* 使用动态视口高度单位，自动适配键盘弹出后的可见区域 */
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 改为顶部对齐，避免键盘弹起时表单被挤到可视区外 */
  padding: 20px 0;
  overflow-y: auto; /* 内容超出时允许滚动 */
  box-sizing: border-box;
}

第三步：优化表单适配性 #

.form{
  background-color: #0ecaf9;
  width: 90%; /* 改为百分比宽度适配不同设备尺寸 */
  max-width: 400px;
  min-height: 500px; /* 替换固定高度为最小高度，小屏设备可自适应 */
  border-radius:70px 180px 90px 80px;
}

注：dvh单位的兼容覆盖率已经超过95%，支持安卓端微信、Chrome、UC等主流浏览器，只有非常老旧的安卓设备需要额外兼容。

极简JS兼容方案（适配老旧设备） #

如果需要兼容安卓5以下的老旧设备，直接把以下代码粘贴到页面<script>标签中即可，无需修改逻辑：

window.addEventListener('load', () => {
  // 记录初始视口高度
  const originHeight = document.documentElement.clientHeight || window.innerHeight
  const demoContainer = document.querySelector('.demo')

  window.addEventListener('resize', () => {
    const currentHeight = document.documentElement.clientHeight || window.innerHeight
    // 高度差超过100px判定为软键盘弹出
    if (originHeight - currentHeight > 100) {
      demoContainer.style.height = `${currentHeight}px`
      // 自动滚动到当前输入框位置
      setTimeout(() => {
        document.activeElement?.scrollIntoViewIfNeeded?.(true)
      }, 100)
    } else {
      // 键盘收起恢复高度
      demoContainer.style.height = `${originHeight}px`
    }
  })
})

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