移动端软键盘弹出引发vmax单位布局异常问题求助

你的问题核心在于vmax单位的特性：vmax取视口宽/高中的最大值，当移动端软键盘弹出时，视口高度会被大幅压缩，导致vmax计算值骤降，所有依赖vmax的元素（字体、宽高、间距）都会同步收缩，引发布局错乱。下面是针对性的修复方案：

1. 替换视口高度单位为dvh #

将body和.App的min-height: 100vh改为100dvh——dvh是动态视口高度，会自动排除软键盘、地址栏等临时占用的空间，保证页面容器高度始终匹配屏幕可用区域：

body {
    min-height: 100dvh;
    position: relative;
}

.App {
    background-color: #ff738b;
    min-height: 100dvh;
}

2. 分离布局尺寸与vmax的强绑定 #

对于输入区域、按钮等核心交互元素，避免完全依赖vmax：

• 移动端textarea的宽度已经用了百分比，可将高度改为vh单位，确保软键盘弹出时高度稳定：

@media screen and (max-width: 800px) {
    .input_div > textarea {
        height: 16vh; /* 替换原16vmax */
        width: 85%;
    }
    .input_div > button {
        height: 4vh; /* 替换原基于vmax的高度 */
        font: 300 2.2vmax "Roboto", sans-serif;
    }
}

• 非移动端可保留vmax，或结合vw/vh混合使用，平衡适配性。

3. 优化视口元标签 #

确保HTML头部的视口设置正确，避免浏览器自动缩放：

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

4. 修复冗余样式 #

你的.input_div重复设置了height: 20vmax和height: 100%，这会导致布局计算冲突，建议删除其中一个，保留height: 100%配合flex布局实现居中：

.input_div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

这些修改后，软键盘弹出时视口高度的变化不会再影响核心布局的尺寸计算，能有效解决异常问题。

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