用途：这是一个前端错误类参考技能，针对 CSS 长度单位、视口百分比单位、字体相对单位、CSS 像素与设备像素的区别，以及 env(safe-area-inset-*) 与 viewport-fit=cover 配合处理刘海和灵动岛。每节都锚定真实故障场景并附规范依据。不覆盖容器查询单位（cqw、cqh、cqi、cqb、cqmin、cqmax）、clamp() 排版与动画卡顿。
主要能力与规则：移动端全高 hero 用 100dvh，需保证不溢出用 100svh，不用 100vh（按 MDN 当前解析为 100lvh，移动端浏览器栏可见时会溢出）。font-size 用 rem 或 %，嵌套中不用 em（会逐层复合）。应随局部字号缩放的属性（按钮内边距、行高倍数、文本内图标）用 em。viewport meta 必须含 viewport-fit=cover，且每个贴边表面配 env(safe-area-inset-*)，否则 iOS 上取值为 0。canvas 后备存储宽高乘以 devicePixelRatio 并调用 ctx.scale(dpr, dpr)。body 子元素全出血优先用 100%，避免经典滚动条系统下 100vw 溢出。屏幕布局不用 in、cm、mm、Q。
使用方式：按决策树选择视口单位（dvh 自适应、svh 保守、lvh 最大、dvi/dvb 随书写模式）；按属性选择 em 或 rem；处理安全区时用 calc() 包裹 env()。示例：.hero { min-height: 100svh; } 配合 @supports (height: 100dvh) 覆盖；footer 用 padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));。
适用场景：移动端全高布局、刘海与灵动岛适配、Retina 画布与图片、书写模式无关布局、滚动条感知宽度。
限制：sv/lv/dv 系列 2023 年新可用、2026 年广泛可用；env(keyboard-inset-) 仅 Chromium 且需 navigator.virtualKeyboard.overlaysContent = true；env(viewport-segment-) 仅折叠屏设备。旧浏览器回退可先写 100svh 再用 @supports 覆盖。