输入法弹出导致Flex变形？设置固定高度解决

输入法弹出时Flex布局变形，根源在于height: 100vh在iOS Safari等浏览器中锁定初始视口高度、不响应键盘展开/收起，导致容器僵化、内容截断或塌陷；真正可靠的解法是弃用固定height，改用min-height/max-height: 100dvh + overflow-y: auto构建弹性容器，并为头部、底部、输入框等关键区域设置flex-shrink: 0或flex: 0 0 auto防止压缩，同时必须监听visualViewport.resize事件（而非window.resize）并配合防抖与阈值判断，才能精准适配键盘动态变化的视觉视口——这套组合策略已在主流现代浏览器落地验证，彻底告别“输着输着页面就乱了”的移动端交互噩梦。

为什么设置 height: 100vh 会让 Flex 布局在输入法弹出时变形

因为 height: 100vh 是按“初始视口高度”计算的固定值，而 iOS Safari 和部分 Android WebView 在软键盘弹出时不会更新 vh 单位，也不会触发 resize 事件。结果就是：Flex 容器仍按全屏高度渲染，但实际可视区域被压缩，导致内容被截断、底部输入框被遮挡、flex: 1 区域塌陷或滚动错乱。

用 min-height + max-height 替代 height 的实操要点

直接替换掉所有 height: 100vh，改用更弹性的约束：

• min-height: 100dvh —— 确保内容少时也能撑满当前可见视口（Chrome 105+、Safari 16.4+ 支持）
• max-height: 100dvh —— 防止内容过多时容器无限拉伸，挤压子项
• overflow-y: auto —— 让内部可滚动，而不是靠 flex 压缩来“适应”变小的视口

例如登录页容器：

.container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
}
.header { flex-shrink: 0; }
.main { flex: 1; overflow-y: auto; }
.footer { flex-shrink: 0; }

不支持 dvh 时 JS 降级必须监听 visualViewport.resize

仅靠 height: 100vh 降级是无效的——它依然会卡在初始高度。真正起作用的是动态绑定当前视觉视口：

• 优先用 window.visualViewport?.height，它在 iOS 上比 window.innerHeight 准确得多
• 必须监听 visualViewport.resize，不能只靠 focus/blur 或 resize（iOS 不触发后者）
• 避免在 focus 回调里立即读取高度——键盘展开有延迟，建议加 setTimeout(..., 50) 防抖
• 设完高度后，对 .main 区域手动 scrollTo(0, 0)，防止 iOS 滚动锚点残留

flex-shrink: 0 不是万能解，但它能守住关键区域

即使高度动态修正了，子项仍可能因空间不足被压缩变形。这时要锁定不可压缩的部分：

• 头部、底部、输入框容器等固定功能区，必须加 flex-shrink: 0
• 不要只写 flex-shrink: 0，搭配 min-height 或显式 height（如 height: 44px）才真正防塌陷
• flex: 0 0 auto 比单独写 flex-shrink: 0 更明确，表示“完全不伸不缩”
• 注意：如果父容器本身高度没控住（比如用了 height: 100% 而非 dvh），flex-shrink: 0 也救不了整体布局

本篇关于《输入法弹出导致Flex变形？设置固定高度解决》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！