当前位置：首页 > 文章列表 > 文章 > 前端 > 软键盘弹起时的CSS适配技巧

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

2026-04-24 23:16:11 0浏览收藏

为什么 `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学习网公众号，给大家分享更多文章知识！