如何用CSS视口单位svh精确适配移动端动态地址栏浏览器？-css教程-PHP中文网

100svh适用于支付页底部按钮、弹窗确认区、带footer的表单页等需绝对不被遮挡的固定区域，它基于最小视口高度计算，值稳定且不随滚动或地址栏收起变化。

如何用css视口单位svh精确适配移动端动态地址栏浏览器？

100svh 适合什么场景

100svh 是“小视口高度”，它代表浏览器 UI（地址栏、底部工具栏）全部展开时的最小可用高度。这不是一个“备用方案”，而是明确用于需要绝对不被遮挡的固定区域——比如支付页底部按钮、弹窗确认区、带 footer 的表单页。它不随滚动变化，值稳定，能规避地址栏收起后内容上移、被误点或误操作的风险。

为什么不能用 100svh 替代 100dvh

二者语义完全不同：100svh 始终按“最矮视口”算，100dvh 按“当前真实可视高度”算。如果在轮播图容器里写 height: 100svh，哪怕地址栏收起了，容器也不会变高，用户会看到大片空白；反过来，在底部按钮上写 100dvh，键盘弹出时按钮可能被顶到屏幕外。混用会导致布局错乱，不是兼容性问题，是逻辑冲突。

@supports 检测必须写对

@supports 不是可有可无的装饰，不加或写错会直接导致样式失效：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须用 @supports (min-height: 100svh) —— height 不支持 svh，只支持 min-height/max-height
不能写成 @supports (svh: 1px)，这不是合法语法
兜底必须存在：.fixed-bottom { min-height: 100vh; } 放在 @supports 外面，否则旧环境会完全丢失高度控制

微信 WebView 和 iOS 15 以下要 JS fallback

截至 2026 年 9 月，微信内置 WebView、QQ 浏览器等多数国产壳仍未透出 svh 支持。仅靠 CSS 会退回到 100vh，而 100vh 在这些环境里依然按初始视口计算，地址栏收起后按钮就悬空了。此时必须用 JS 监听 resize（不是 scroll），并动态设置 CSS 变量：

document.documentElement.style.setProperty('--svh', `${window.innerHeight * 0.01}px`);
window.addEventListener('resize', throttle(() => {
  document.documentElement.style.setProperty('--svh', `${window.innerHeight * 0.01}px`);
}, 300));

CSS 中写 min-height: calc(var(--svh, 1vh) * 100)，变量未定义时不至于整个表达式崩溃。

真正难处理的不是单位本身，而是不同 WebView 对 resize 触发时机和频率的差异——有些在地址栏刚动就发，有些要等动画结束才触发，这个细节几乎没法统一兜住。