移动端Flex布局适配虚拟键盘：解决布局上移问题

问题背景 #

现有类控制台布局：顶部菜单栏，底部输入框，中间可滚动内容区。PC端及移动端未唤起虚拟键盘时显示正常，但唤起键盘后，UI顶部被移出视口，无法滚动到菜单栏。Chrome DevTools模拟Nexus 5正常，三星S20的Chrome浏览器出现问题，需布局始终填充屏幕剩余空间，避免键盘唤起时整体上移。

核心解决方案 #

移动端浏览器在唤起虚拟键盘时的视口行为存在差异，部分安卓设备会采用「缩小视口高度」而非「调整窗口高度」的方式处理。要解决这个问题，需从以下几点调整：

• 使用viewport-fit=cover配合env()变量，确保布局适配设备安全区域，避免视口偏移
• 改用height: 100dvh替代绝对定位，dvh（动态视口高度）会随虚拟键盘唤起自动调整高度，比vh或绝对定位更可靠
• 优化Flex布局结构，简化层级，确保内容区正确填充剩余空间

修改后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  </head>
  <body>
    <div id="container">
      <div id="toprow">
        Menubar
      </div>
      <div id="midrow">
        <pre>
          <span>ton of lines</span>
        </pre>
      </div>
      <div id="bottomrow">
        <input type="text" id="commandline">
      </div>
    </div>
  </body>
</html>

CSS #

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

#container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 适配设备安全区域 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#toprow, #bottomrow {
  flex: none;
  background-color: red;
}

#midrow {
  flex: 1;
  overflow: hidden;
}

pre {
  height: 100%;
  overflow-y: scroll;
}

.line {
  display: block;
}

#commandline {
  width: 100%;
  border: 1px solid red;
}

JavaScript #

let pre = $("pre")
for (let i = 0; i < 200; i++) {
    pre.append("<span class='line'>line " + i + "</span>")
}
function bottom() {
    pre.scrollTop(pre.prop("scrollHeight"));
}
$("#commandline").on('keyup', function (e) {
  if(e.which == 13){
    pre.append("<span class='line'>" + $("#commandline").val() + "</span>");
    bottom();
    $("#commandline").val("");
  }
});
bottom();

额外问题：移除移动端浏览器地址栏 #

移动端浏览器的地址栏无法通过前端代码直接移除，但可通过以下方式实现隐藏效果：

• 配置Web App Manifest：添加display: standalone或display: fullscreen属性，引导用户将网站添加到主屏幕，以独立应用模式打开时地址栏会被隐藏
• 监听滚动事件：页面向下滚动时，部分浏览器会自动隐藏地址栏，但这只是临时视觉隐藏，滚动回顶部时地址栏会重新出现

内容的提问来源于stack exchange，提问作者Marino Šimić