应使用100dvh而非100svh解决地址栏遮挡问题，因100svh是固定最小可视高度、不响应滚动变化，而100dvh能实时适配地址栏收起/展开，需配合min-height: 100vh兜底及@supports(min-height: 100dvh)检测。
别用 svh 解决地址栏遮挡——它不是为这个场景设计的，强行用反而会让底部大面积留白或内容上浮。
为什么 100svh 会加重遮挡问题
svh（small viewport height）代表的是“地址栏和底部工具栏都完全展开时的最小可视高度”，它是个固定值，不随滚动或地址栏显隐变化。iOS Safari 中用户一滚动，地址栏收起，实际可视区域变大，但 100svh 还卡在那个最小值上，结果就是容器高度偏小、内容悬空、底部露白。
- 典型现象：
height: 100svh的全屏轮播，下拉后顶部被截、底部空白明显 - Safari 直到 v17.4 仍不支持
svh，写了就忽略，回退到auto或上一条声明 -
svh≠ 当前可见高度，也不响应工具栏显隐，和100vh一样“冻结”
svh 真正该用在哪
它只适合语义明确的“必须始终避开工具栏”的固定元素，比如支付页底部按钮、输入框、弹层操作区——这些地方宁可牺牲一点空间，也不能被地址栏顶上去。
- 错误写法：
height: 100svh用于全屏容器或轮播图 - 正确写法：
.pay-button { position: fixed; bottom: 0; width: 100%; padding-bottom: env(safe-area-inset-bottom); } - 不能用
@supports (height: 100svh)做降级——Safari 不识别，整条规则失效；Chrome 115+、Firefox 119+ 才支持，覆盖率有限
想撑满当前屏幕？用 100dvh，不是 100svh
dvh 是唯一能实时响应地址栏收起/展开的单位，iOS Safari 16.4+、Chrome 109+、Firefox 117+ 已稳定支持，语义精准：此刻用户真正看到的高度。
- 推荐写法：
min-height: 100vh;放在@supports外作为兜底，否则老设备直接塌陷 - 正确结构：
section.full { min-height: 100vh; }@supports (min-height: 100dvh) { section.full { min-height: 100dvh; } } - 微信 WebView、iOS 15.x 等环境根本不认
dvh或svh，此时必须用 JS 监听resize动态设置--vh变量
关键点在于：单位选择不是技术替换，而是需求映射。svh 是锚定最小安全区的“保底单位”，不是“当前可视单位”。真要解决遮挡，得先确认你到底需要“始终避开工具栏”，还是“贴合此刻屏幕”。前者才考虑 svh，后者必须用 dvh 或 JS fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
