CSS如何解决移动端输入法遮挡布局_使用新视口单位lvh与svh适配

lvh/svh 是 CSS 新增视口单位，lvh 表示不考虑软键盘的最大可用高度，svh 表示键盘弹出时的最小可用高度；相比 100vh，它们原生响应键盘状态，避免 iOS 底部 fixed 元素被遮挡及安卓高度突变问题。 lvh/svh 是什么，为什么比 100vh 更可靠 lvh（large viewport height）和 svh（small viewport height）是 CSS 新增的视口单位，2023 年起在 Safari 16.4+、Chrome 109+、Edge 109+ 中稳定支持。它们分别代表「不考虑软键盘时的最大可用高度」和「软键盘弹出时的最小可用高度」。相比 ， 始终等于设备物理屏幕高度（iOS/Android 都稳定），而 在键盘弹出时会自动收缩——这正是我们真正需要的响应信号。 用 做全屏容器高度，在 iOS 上键盘弹出时页面不会压缩，但 值不变，导致底部 fixed 元素被盖住；在安卓上它又可能突变，行为不可控。而 是浏览器原生识别键盘状态后计算出的高度，无需 JS 推断，也不依赖 unreliable 的 变化。 如何用 lvh/svh 替代 100vh 布局 直接替换旧写法即可生效，但要注意适用范围和 fallback： 全屏页容器：把 改成 ，确保初始渲染不被截断 可滚动内容区：用 限制最大高度，配合 ，让内容在键盘弹出时自然收缩留出空间 输入框父容器：设 + ，再让输入框用 推到底部，键盘弹出时容器自动“收腰”，输入框仍可见 必须加降级：用 回退到 或 JS 动态补 height lvh/svh 与 env(keyboard-inset-bottom) 搭配使用 提供键盘高度值（iOS 16.4+），但它只在键盘弹出时有效，且安卓不支持； 虽然能反映高度变化，但不直接给出像素值。两者互补： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”； 按钮上浮：用 + ，同时加 避免解析失败 动态 padding：在 focus 时给容器加 ，但仅限 iOS；安卓需 fallback 到 JS 估算（如监听 后延时读 差值） 不要混用 和 计算同一尺寸—— 是高度， 是偏移量，语义不同，强行相减易出错 容易忽略的兼容性与调试陷阱 看似新特性很“干净”，但实际落地有三处硬伤： iOS 微信内置浏览器（X5 内核）至今不支持 / 和 ，哪怕 iOS 系统是 17.x —— 必须用 UA 判断并走 JS 分支 在页面刚加载、键盘尚未触发过时，值等于 ；首次弹出键盘后才开始变化，所以不能靠它做初始布局判断 Chrome Android 对 的更新有约 100ms 延迟，若在 立即读取 ，可能拿到旧值；应结合 或监听 后的 事件兜底 最稳妥的做法不是全押注新单位，而是用 做基础高度锚点， 控制可滚动区域， 仅用于 iOS 按钮微调，其余场景靠 + 延迟执行兜底。新单位省的是 JS 计算逻辑，不是交互兜底责任。