safari 不支持 100svh 因其尚未实现 css values and units level 5 中的 svh 单位，仅 chromium 115+ 和 firefox 119+ 支持；应优先使用兼容性更好的 100dvh，老版本 safari 可通过 javascript 动态设置 height 为 window.innerheight 并防抖处理。
为什么 100svh 在 Safari 中不生效
因为 Safari（截至 v17.4）尚未支持 svh 这类动态视口单位。它只识别 vh、dvh 和旧版 vh 行为，而 svh（small viewport height）是 CSS Values and Units Level 5 提案中的新单位，目前仅 Chromium 115+ 和 Firefox 119+ 实现。你在 Safari 中写 height: 100svh，浏览器会直接忽略该声明，回退到初始值（如 auto），导致元素高度塌陷或布局错乱。
Safari 中替代 100svh 的可靠方案
100svh 的设计目标是避开地址栏/工具栏伸缩导致的 100vh 跳变，Safari 下最稳妥的落地方式是用 dvh（dynamic viewport height）——它在 Safari 16.4+ 已完整支持，且语义与 svh 高度一致（即取“用户当前可见视口高度”，含地址栏隐藏时的扩展空间）。
- ✅ 优先用
height: 100dvh：兼容 Safari 16.4+、Chrome 105+、Firefox 114+ - ⚠️ 不要用
100vh：Safari 滚动时地址栏收起/展开会导致视口高度突变，触发重排和页面“抖动” - ⚠️ 不要 fallback 到
100%或min-height: 100vh：父容器高度不可控时，100%无效；min-height无法保证撑满，且仍受vh跳变影响
需要兼容 Safari 16.3 及更早版本怎么办
若必须支持老 Safari（如 iOS 16.2 及以下），dvh 不可用，只能退回到 JavaScript 动态计算。核心思路是监听 resize 和 scroll（因地址栏变化会触发 resize），用 window.innerHeight 获取实时可视高度：
document.documentElement.style.height = window.innerHeight + 'px';
但要注意：
- ⚠️
resize在 Safari 中对地址栏变化的响应有延迟（约 100–300ms），需加setTimeout防抖 - ⚠️ 首屏渲染前就要执行一次，否则白屏期高度为 0
- ⚠️ 必须配合
body { margin: 0 }和html { height: 100% }，否则innerHeight计算值可能被外边距干扰
检查是否真需要 svh 级别的精度
很多场景其实并不需要严格“始终贴底”。例如全屏轮播、登录页背景图，用 min-height: 100dvh + display: flex; flex-direction: column 就足够应对内容溢出；而固定定位的弹窗，直接用 top: 0; bottom: 0 比任何 vh 单位都可靠。真正依赖 svh 的，往往是需要精确控制滚动锚点或 canvas 渲染区域的富交互页面——这类场景本身就需要 JS 协同，不如直接用 innerHeight 控制。
别被单位名带偏：Safari 不吃 svh，但 dvh 几乎等价，老版本才值得写 JS 补丁。最常被忽略的是没清掉 body 默认 margin，导致 100dvh 元素下方永远多出 8px 空隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
