Android上input输入框聚焦后页面布局错乱怎么办？

兄弟，这坑我以前踩过，简直是移动端 Web 开发的噩梦。你说得对，这就是 Android 软键盘弹出机制搞的鬼。iOS 通常是软键盘悬浮覆盖在页面上，视口高度不变；但很多安卓机（特别是你说的三星、小米）是直接把网页视口高度给压缩了，等于你的可视区域变矮了。

如果你页面里用了 position: fixed 或者是靠 100vh 撑开的高度，键盘一弹，这些固定定位的元素就会跟着视口底部往上跑，导致布局乱飞。

解决方案其实很简单，别用 fixed 定位做底部导航，改用 Flex 布局把页面撑开。核心思路是让内容区域自适应滚动，而不是把整个页面顶上去。

给你写个能用的结构，你照着改改 CSS：

html, body {

  height: 100%;

  margin: 0;

  overflow: hidden; /* 防止 body 滚动，只让中间区域滚 */

}



.page-wrapper {

  display: flex;

  flex-direction: column;

  height: 100%; /* 或者用 100dvh，如果浏览器支持的话 */

}



.main-content {

  flex: 1; /* 占据剩余空间 */

  overflow-y: auto; /* 内容多了这里滚动 */

  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */

}



.bottom-bar {

  /* 不需要 fixed，直接放在文档流里，它会自然沉底 */

  padding: 10px;

  background: #fff;

}

HTML 结构也得调整一下，把输入框和底部按钮包在 flex 容器里：

<div class="page-wrapper">

  <div class="main-content">

    <!-- 这里放你的表单内容，可以很长 -->

    <div class="form-container">

      <input type="text" placeholder="请输入姓名" />

    </div>

  </div>

  <div class="bottom-bar">

    <button>提交</button>

  </div>

</div>

当初我也是试了一堆 meta 标签都没用，最后换成这种 Flex 纵向布局才搞定。这样键盘弹出来的时候，只会挤压中间的 main-content 区域，底部的按钮会被顶上去显示在键盘上方，不会飞出视野，也不会错位。你可以试试这个方案，基本能兼容 99% 的安卓机。