100svh会加剧地址栏展开时的布局挤压，因其锚定最小视口高度；正确检测需用@supports(min-height:100svh)，兜底应写在外部；适配动态视口应优先使用100dvh并配合min-height和js fallback。
100svh 不能修复地址栏展开时的布局挤压，它反而会让问题更明显——因为它就是为“地址栏完全展开”这个状态设计的。
为什么 100svh 会让挤压更严重
svh 的全称是 small viewport height，它代表的是「浏览器 UI（地址栏 + 底部工具栏）全部展开时的最小可用高度」。也就是说，你写 min-height: 100svh，等于主动把容器锚定在最矮的那个视口上。
- 地址栏展开时：实际视口 =
100svh，看起来刚好填满 - 地址栏收起后：实际视口变大，但容器仍卡在
100svh高度，底部大面积留白、内容悬空 - 滚动过程中：
100svh值完全不变，和100vh一样“冻结”，毫无响应性
典型现象：轮播图容器设了 height: 100svh，一滚动就顶部被截、底部发白；支付按钮设了 height: 100svh，地址栏收起后按钮离屏幕底边越来越远。
@supports 检测必须用 min-height，不能用 height
@supports 不是装饰，写错就整条规则失效。浏览器根本不支持 height: 100svh 这种写法——svh 只能用于 min-height 或 max-height，这是语法硬限制。
- ✅ 正确：
@supports (min-height: 100svh) - ❌ 错误：
@supports (height: 100svh)→ Safari/旧 Chrome 直接忽略整条规则 - ❌ 错误：
@supports (svh: 1px)→ 非法语法，检测永远不通过
兜底也必须写在外面：.section { min-height: 100vh; } 放在 @supports 块之外，否则不支持的环境会彻底丢失高度控制。
真正该用 dvh，不是 svh
想让布局随地址栏收放实时适配，唯一语义正确的单位是 dvh（dynamic viewport height）。它在 iOS 16.4+、Chrome 109+、Firefox 117+ 中已稳定支持，值等于用户此刻真正看到的高度。
- 地址栏展开 →
100dvh变小 → 容器收缩，不挤压 - 地址栏收起 →
100dvh变大 → 容器撑开，不留白 - 键盘弹出 →
100dvh再次收缩，输入框不会被遮
写法要带兜底：
.full { min-height: 100vh; }@supports (min-height: 100dvh) { .full { min-height: 100dvh; } }注意用 min-height 而非 height，避免内容超长时被截断。微信 WebView 和 iOS 15 以下必须 JS fallback
截至 2026 年 10 月，微信内置浏览器、QQ 浏览器、iOS 15.x 等环境完全不识别 dvh 或 svh，CSS 方案直接失效。
- 监听
resize（不是scroll），节流后更新 CSS 变量：let resizeTimer;function updateVh() { document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); }updateVh();window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(updateVh, 300); }); - CSS 中使用：
min-height: calc(var(--vh, 1vh) * 100)，变量未定义时 fallback 到1vh，不至于整个表达式崩溃
真正难处理的是不同 WebView 对 resize 触发时机的差异：有些在地址栏刚动就发，有些等动画结束才触发，这个细节几乎没法统一兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
