使用 100svh 作为模态框高度，配合 100lvh 作为后备方案，可以解决移动端浏览器地址栏伸缩导致的高度跳动问题。具体做法是在 css 中同时声明这两个属性，并设置 position: fixed 使其覆盖全屏，这样在 ios safari 等环境中，弹窗能稳定占据可视区域，避免内容被遮挡或出现滚动条。
为什么普通 vh 单位会导致布局抖动
普通 vh 单位基于初始包含块的高度，在移动端会随地址栏的显示与隐藏发生动态变化。当用户滚动页面时，地址栏收起，视口变高，vh 计算出的高度随之增加，导致原本固定的模态框突然变大或产生内部滚动。这种不稳定性破坏了全屏体验，因此需要引入更稳定的视口单位来替代。
/* 基础重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 模态框容器 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* 优先使用小视口高度，适配移动端地址栏收起状态 */
height: 100svh;
/* 兼容不支持 svh 的旧浏览器，回退到大视口高度 */
height: 100lvh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
/* 模态框内容 */
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 90%;
max-height: 90%;
overflow-y: auto;
}svh 与 lvh 的具体行为差异
svh (Small Viewport Height) 对应地址栏收起时的最小视口高度，而 lvh (Large Viewport Height) 对应地址栏展开时的最大视口高度。在大多数现代移动端浏览器中，100svh 能确保内容不被底部导航栏或地址栏遮挡，因为它是基于当前可见的最小安全区域计算的。如果仅使用 100vh，在地址栏收起时，页面底部可能会被系统 UI 覆盖；如果仅使用 100lvh，在地址栏展开时，可能会产生不必要的空白区域或滚动。结合两者并使用 100svh 优先，能获得最佳的全屏一致性体验。
立即学习“前端免费学习笔记（深入）”；
如何处理不支持新单位的旧版浏览器
对于不支持 svh 和 lvh 的旧版浏览器，CSS 的回退机制至关重要。通过先声明 height: 100svh，再声明 height: 100lvh，浏览器会自动忽略无法识别的属性，执行最后一个有效的声明。在支持 svh 的环境中，将使用较小的值以防止遮挡；在不支持的环境中，回退到 lvh 或传统的 vh。为了进一步兼容极老版本，可以添加 height: 100vh 作为最终兜底。这种层叠写法无需 JavaScript 即可实现跨版本的稳定表现，确保所有用户都能获得基本可用的全屏模态体验。
