100vh在移动端失效是因为其值仅在页面加载时静态计算，无法响应iOS Safari等浏览器地址栏收起/展开导致的视口高度动态变化；推荐用100dvh替代并配合@supports降级，或JS监听resize动态设置CSS变量--vh。
vh-100 在移动端为什么经常失效
因为 vh-100 对应的是 css 的 100vh，而移动端浏览器（尤其是 ios safari）在地址栏收起/展开时会动态改变可视区域高度，但 100vh 值只在页面加载时计算一次，不会重算。结果就是：页面刚打开时内容被地址栏遮住，滚动后又突然“上跳”留白，vh-100 容器看起来要么太高、要么太矮。
直接替换为 dvh-100 是否可行
可以，但得看目标环境是否支持：dvh-100 是 Bootstrap 5.3.3+ 内置的工具类，底层是 100dvh 单位，能随地址栏变化实时更新高度。不过它只在以下环境生效：
- iOS Safari 16.4+
- Chrome 100+ / Edge 100+ / Firefox 110+
- 旧版浏览器（如 iOS 15 或 Android 4.4 WebView）会直接忽略
dvh-100，回退到无高度或height: auto
所以不能只写 dvh-100，必须加 fallback。
如何安全使用 vh-100 的替代方案
推荐组合写法，兼顾现代与旧环境：
<div class="min-vh-100 d-flex align-items-center justify-content-center"> <div>居中内容</div> </div>
关键点：
-
min-vh-100比vh-100更稳妥：它设的是min-height: 100vh，内容超长时不会截断 - 真正需要“动态适配”的场景（如固定底部按钮、全屏弹窗），用
height: 100dvh+@supports包裹 - 对 iOS 15 及更早版本，必须 JS 动态设置
--vh变量并监听resize和orientationchange
容易被忽略的 Flex 居中前提
即使用了 min-vh-100 或 dvh-100，align-items-center 仍可能无效——因为父容器没启用 Flex：
-
align-items-center不是独立生效的，它依赖父容器有display: flex - Bootstrap 5 中必须加
d-flex，光加min-vh-100不够 - 如果父容器是
.row，它默认是 flex，但高度仍需由其父级提供（比如.container-fluid要加min-vh-100）
最简可靠组合永远是：min-vh-100 d-flex align-items-center justify-content-center，缺一不可。
