ios safari（15.4+）中min-height: 100vh失效，因其锚定layout viewport而非动态visual viewport；推荐用calc(100vh - env(safe-area-inset-bottom))或js监听visualviewport实时更新css变量。
min-height: 100vh 在 iOS Safari 上失效？
直接说结论：在 iOS Safari（尤其是 15.4+）里，min-height: 100vh 经常不等于“视口可视高度”，而是取了页面初始加载时的视口高度——比如弹出软键盘、地址栏收起/展开后，100vh 不会动态更新，导致内容区域被截断或留白异常。
根本原因是 Safari 把 vh 单位锚定在「布局视口（layout viewport）」而非「视觉视口（visual viewport）」上，而 layout viewport 高度在软键盘唤起时并不收缩。
- 典型现象：
min-height: 100vh的容器在 iPhone 上输入框聚焦后，底部被遮住，滚动失效 - 只影响移动端 Web，桌面端和 Android Chrome 表现正常
-
height: 100vh同样失效，但min-height更隐蔽——因为内容少时看似正常，一加文字就露馅
用 calc() 动态算出可用视口高度
绕过 vh 的缺陷，最稳妥的方式是用 JS 获取 visualViewport.height，再注入 CSS 变量；但若想纯 CSS 解决，calc() 配合 env(safe-area-inset-bottom) 是轻量级兜底方案。
前提是页面已启用视口控制，并处理了刘海屏安全区：
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 用
min-height: calc(100vh - env(safe-area-inset-bottom))比单纯100vh更可靠（尤其在有底部安全区的 iPhone 上） - 注意：iOS 15.4+ 开始支持
env(safe-area-inset-bottom)，旧版本会忽略，所以它只是增强，不是银弹
示例：
body {
min-height: calc(100vh - env(safe-area-inset-bottom, 0px));
}
JS 注入实时 visualViewport.height 更准
如果内容区域必须严格贴底、且要响应软键盘开关，CSS 无解，只能靠 JS 监听 visualViewport 变化。
关键点在于：不能只 onload 时设一次，得监听 resize 和 focus/blur 事件链，因为软键盘触发的是 visualViewport.resize，不是 window.resize。
- 先检查
if ('visualViewport' in window)，避免报错 - 用
visualViewport.height替代window.innerHeight，前者随软键盘实时变化 - 把高度写进一个 CSS 自定义属性，比如
:root { --vh: 100vh; }，然后 JS 动态更新document.documentElement.style.setProperty('--vh', `${vh}px`) - CSS 中写
min-height: calc(var(--vh, 100vh) * 1)（乘 1 是为触发重计算）
为什么不用 100dvh？
100dvh 是 CSS 新单位，本意就是解决 100vh 在移动端的缺陷，但它目前（截至 2024 年中）在 Safari 中仍处于实验阶段，默认关闭，需手动开启 chrome://flags/#enable-css-dvh-unit 类似开关——生产环境不可用。
换句话说：写了 min-height: 100dvh，在绝大多数 iPhone 上等于没写。
真正能用上 dvh 还得等 Safari 正式启用，或者你明确只服务已开启实验功能的内部用户。
现在硬上，不如老实用 JS + CSS 变量组合拳，至少可控、可降级、不闪退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
