最简可靠方案是用@supports包裹min-height:100dvh；ios旧版需js注入--vh变量并监听visualviewport.resize，否则首屏塌陷。
直接给父容器加 min-height: 100dvh 并用 @supports 包裹，是当前最简且可靠的起点；但若需兼容 iOS 15 及更早版本，必须配合 JS 动态注入 --vh 变量，否则首屏就塌。
为什么 min-height: 100vh 在 iOS Safari 里会“卡死”高度
iOS Safari 的 100vh 锚定在初始 layout viewport（含地址栏），滚动后地址栏收起、视口变高，但 CSS 不重算——结果就是容器撑过头（底部留白）或撑不满（内容被裁）。这不是你写错了，是 Safari 渲染逻辑本身不响应视觉变化。
-
100vh在软键盘弹出时完全无反应，min-height值始终不变 -
min-height: 100%更不可靠：它依赖整条祖先链（html、body、所有中间容器）都设了height: 100%，而 Safari 对这条链的解析极易中断 - 别用
height: 100vh替代——它会强制截断超长内容，导致滚动异常
用 100dvh + @supports 是现代解法，但必须整条规则包裹
100dvh 表示“当前可见视口高度”，iOS 16.4+ 和 Android Chrome 109+ 已支持，能实时响应地址栏收放、键盘弹起、横竖屏切换。但它不是无条件生效的。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 错误写法：
min-height: 100vh; min-height: 100dvh;—— Safari 会忽略无效值，但不会 fallback 到前一个声明 - 正确写法：必须用
@supports (min-height: 100dvh)包裹整条规则，例如：@supports (min-height: 100dvh) { .app { min-height: 100dvh; } } - Firefox 当前不支持
dvh单位，老 Android WebView 表现也不稳定，降级不是可选项，是必选项
兼容 iOS 15 及更早：用 --vh 变量 + visualViewport.resize 监听
仅靠 @supports 会在 iOS 15.x 及更早版本 fallback 到 100vh，而这些版本对 100vh 的计算缺陷最严重——页面可能直接渲染成一条线。
- 必须在
DOMContentLoaded后立即执行 JS 注入初始--vh值，否则首屏渲染用的是错误初始值 - 监听
visualViewport?.resize（iOS 16.4+），而非window.resize（iOS Safari 根本不触发） - 老版本降级用
focusin/blur+setTimeout(() => {}, 50)防抖，配合window.innerHeight阈值判断（如比初始值小 >150px 才认为键盘已弹出） - CSS 中写：
min-height: calc(var(--vh, 1vh) * 100)，其中1vh是兜底，避免 JS 未加载时元素缩成一条线
嵌套 Flex 容器里子项仍不拉伸？补上 flex-basis: 0px 和 min-height: 0
即使外层用了 100dvh，内层 Flex 子项（比如卡片内部的 display: flex; flex-direction: column）在旧版 Safari（iOS 9–12.4 / macOS Safari 9–12）中仍可能坍缩为 0——这是因 Safari 错误将 flex: 1 解析为 flex-basis: auto，再叠加默认 min-height: auto 导致的冻结行为。
- 显式写：
flex: 1 1 0px或拆解为flex-grow: 1; flex-shrink: 1; flex-basis: 0px（不能写0%，Safari 会忽略） - 必须配套加：
min-height: 0（垂直布局下）或min-width: 0（水平布局下）——这不是可选项，是解除 Safari 默认冻结的关键开关 - 若子项含
<img>，额外加img { height: auto; }，否则 Safari 可能冻结其内在尺寸估算，导致flex-basis: 0px仍不生效
真正卡住人的不是单个属性，而是校准链：100dvh 或 --vh 提供高度基准，flex-basis: 0px 切断错误推断，min-height: 0 解除冻结，三者缺一不可。漏掉任意一环，Safari 就会回到“凭空坍缩”的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
