vh-100在移动端显示异常是因为其底层100vh在ios safari、微信webview中按初始最大视口静态计算，不响应地址栏收起或键盘弹出；应优先用@supports包裹的min-height:100dvh，并以js动态设置--vh变量作为ios 15等旧环境兜底。
vh-100 在移动端显示异常，不是 Bootstrap 写错了，而是它底层用的 100vh 本身在 iOS Safari、微信 WebView 等环境里就不可靠——值在页面加载时就锁死了，不随地址栏收起/键盘弹出动态更新。
为什么 vh-100 在 iOS Safari 滚动后“跳一下”？
页面刚加载时，iOS Safari 地址栏可见，100vh 按包含地址栏的“最大视口”算（比如 844px）；用户一滚动，地址栏收起，可视区域变高（比如 762px → 812px），但 vh-100 的像素值没变，导致容器比屏幕高，底部留白或内容被截。这不是 Bootstrap 的 bug，是 CSS 规范早期没覆盖动态工具栏场景。
直接换成 dvh-100 就行了吗？
可以，但有硬前提：
-
dvh-100是 Bootstrap 5.3.3+ 新增的工具类，对应100dvh单位，能响应地址栏变化 - 它只在 iOS Safari 16.4+、Chrome 109+、Firefox 117+ 等现代环境生效
- iOS 15、微信 X5 内核、旧版 Samsung Internet 完全不认识
dvh-100，会直接忽略，回退到height: auto，页面塌成一条线 - 必须搭配
@supports降级，不能只写dvh-100
怎么安全地用 vh-100 的替代方案？
Bootstrap 自身不提供自动降级逻辑，得手动组合：
- 优先用
min-height: 100vh做基础 fallback，避免老浏览器塌陷 - 用
@supports (min-height: 100dvh)包裹整条规则，把min-height: 100dvh放进去，不能只包值 - 别用
height: 100dvh，改用min-height: 100dvh，否则内容超长时会被强制裁剪 - 构建工具（如 PostCSS 插件）若自动把
dvh降级成vh，必须关掉——否则写了等于白写
微信和 iOS 15 怎么兜底？
这些环境不识别 100dvh，JS 是唯一解，但监听不能只靠 resize：
- iOS 地址栏收起时不触发
resize，只触发scroll - 软键盘弹出时，
resize在真机上大概率不触发或延迟 - 必须监听
visualViewport?.resize（最准），降级 fallback 到resize+scroll+orientationchange - 首次执行必须在
DOMContentLoaded后立即调用，否则首屏渲染仍用错误初始值 - 设置
--vh变量后，CSS 要用min-height: calc(var(--vh) * 100)，且父容器需有明确高度约束，否则绝对定位子元素可能算出 0
真正容易被忽略的是：所有方案都依赖 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 这个开关。漏掉它，100dvh、env(safe-area-inset-bottom)、visualViewport 全部失效。但它又可能在某些安卓定制 WebView 里引发渲染异常，得实机逐个测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
