软键盘弹起时的CSS适配技巧

本文深入解析了移动端网页中软键盘弹出导致布局错乱的顽疾，指出传统 100vh 在 iOS 和部分 Android 浏览器中因锁定初始视口高度而失效的根本原因，并重磅推荐以 100dvh 为核心、配合 env(safe-area-inset-bottom) 动态预留系统 UI 空间、再辅以 focus/blur 事件精准控制时机的三重协同方案——这套纯 CSS 为主、轻量 JS 为辅的现代实践，无需复杂计算或频繁重排，即可实现平滑、可靠、跨平台的键盘自适应布局，让登录页按钮不再被遮挡、fixed 底栏不再消失、输入体验真正丝滑如原生。

直接用 100dvh 替代 100vh，再配合 env(safe-area-inset-bottom) 和 focus/ blur 事件兜底，是当前最稳的组合方案。纯 CSS 无法感知键盘，但浏览器已提供足够可靠的运行时变量和事件信号。

为什么 100vh 在软键盘弹出后失效

iOS Safari 和部分 Android WebView 会把 100vh 锁定在页面加载时的视口高度，键盘只是“覆盖层”，不触发 layout viewport 重算。结果就是：键盘一弹，100vh 容器仍按全屏高度渲染，底部内容被顶出或留白；Android Chrome 虽多数能响应，但某些厂商浏览器会缩放页面，导致计算失准。

常见错误现象：

• 全屏登录页底部按钮被键盘盖住，滚动也拉不到
• position: fixed; bottom: 0 的提交栏在 iOS 上直接消失
• 用 window.innerHeight 动态设 height，在键盘收起后延迟恢复，页面闪一下

根本原因不是 CSS 写错了，而是你依赖了一个静态单位去描述动态视口。

100dvh 是什么，为什么它比 100vh 更可靠

dvh（dynamic viewport height）是 CSS 新增的动态视口单位，值随视觉视口（visual viewport）实时变化——键盘弹出时它变小，收起时自动恢复。它不依赖 JS，无兼容性 fallback 成本，且已被 Chrome 105+、Safari 16.4+、Firefox 110+ 原生支持。

使用要点：

• 替换所有关键容器的 height: 100vh → height: 100dvh
• 必须搭配 min-height: 100dvh 或 flex: 1 使用，避免内容少时容器塌陷
• 不要混用 dvh 和 vh 在同一布局链中，比如父用 100dvh，子用 50vh，会导致比例错乱
• 旧浏览器不支持时，用 @supports not (height: 100dvh) { height: 100vh; } 降级

如何用 env(safe-area-inset-bottom) 预留键盘空间

env(safe-area-inset-bottom) 不是键盘高度，而是系统 UI（含键盘）侵入视口的最小距离。它在键盘弹出时自动增大，收起后归零，iOS 16.4+ 和 Chrome 106+ 均支持，语义上比硬写 calc(100vh - 300px) 更健壮。

典型用法：

• 底部固定操作栏：padding-bottom: env(safe-area-inset-bottom, 20px);（加 fallback 防止老 Safari 忽略整条规则）
• 输入框父容器加 margin-bottom: env(safe-area-inset-bottom);，让内容自然上浮
• 避免用它做减法：height: calc(100dvh - env(safe-area-inset-bottom)) 是错的——dvh 已含键盘压缩，再减会过度收缩

注意：env() 只在键盘弹出或有刘海/圆角时非零，无键盘时为 0，天然适合“条件预留”场景。

为什么还要监听 focus 和 blur 事件

dvh 和 env() 解决了“高度变化”，但没解决“焦点时机”问题。iOS 键盘弹出有动画延迟，focus 触发早于键盘完全展开，blur 又早于键盘收起完成。单纯靠 CSS 变量，可能在键盘刚露头时就调整了布局，造成跳变。

实操建议：

• 给所有 input、textarea 绑定 focus，添加 body 类：document.body.classList.add('keyboard-active')
• CSS 中写：.keyboard-active .full-height { height: 100dvh; }（强化控制权）
• blur 后加 setTimeout(() => { document.body.classList.remove('keyboard-active'); }, 100)，等动画结束再恢复
• 避免对每个输入框单独处理，统一用 body class 控制根容器，减少重排

最容易被忽略的是：键盘收起后，iOS 不会自动回滚页面位置。如果用户在中间区域输入，键盘收起后页面卡在偏移处，得手动 window.scrollTo(0, 0) 或用 scrollIntoView 补救——但这不属于布局适配范畴，属于滚动锚点修复。

好了，本文到此结束，带大家了解了《软键盘弹起时的CSS适配技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！