CSS 动态视口单位与安全区适配：dvh/svh/lvh 与 env() 实践

背景与价值移动端地址栏与系统 UI 变化导致 `100vh` 不稳定；动态视口单位可准确反映当前/最小/最大视口高度，避免跳动。基本用法.screen { min-height: 100dvh; } .modal { max-height: 90svh; } .landing { min-height: 100lvh; } 安全区适配.container { padding-bottom: env(safe-area-inset-bottom); padding-top: env(safe-area-inset-top); } 组合策略在关键页面使用 `100dvh`；需要最小布局保证的场景使用 `svh`；全屏展示使用 `lvh`。安全区与背景/固定元素协同，避免遮挡与误触。指标验证（Chrome 128/Edge 130/iOS 17）布局跳动（CLS）：地址栏变化场景 ≤ 0.02。视觉稳定性：滚动与切换时无可感知跳变；用户反馈显著改善。回退策略不支持单位：使用 JS 测量设置 `--vh` 变量并替换；保留 env() 安全区变量以兼容支持环境。测试清单iOS/Android 不同浏览器下窗口变化与折叠场景布局稳定；安全区占位合理。