动态视口单位 svh/lvh/dvh 移动端可视高度适配实践

动态视口单位 svh/lvh/dvh 移动端可视高度适配实践概述`svh`、`lvh`、`dvh` 分别表示小、逻辑、动态视口高度，用于解决地址栏、手势区域与键盘弹出导致的视口变化问题。核心概念与参数`svh`：最小可视高度，避免因工具栏收起导致超出场景。`lvh`：稳定逻辑高度，类似传统 `vh`。`dvh`：动态高度，随 UI 变化实时更新。实践示例<main class="app"> <header class="bar">标题</header> <section class="content">内容</section> </main> <style> .app { min-height: 100svh; } .content { min-height: calc(100dvh - 56px); } </style> 验证方法浏览器支持：Chrome 108+、Safari 16+、Firefox 109+。测试环境：iOS 17 / Android 14；地址栏显隐与软键盘弹出场景。指标观察：滚动与输入时 `CLS` 不异常，交互 `INP` 稳定。注意事项避免将 `dvh` 用于固定元素高度导致频繁重排，建议用于容器最小高度。与安全区单位 `env(safe-area-inset-*)` 协同处理异形屏与手势区域。提供 `vh` 回退以覆盖旧版浏览器。