100vh在iOS Safari和微信WebView中“差一截”是因按加载时带地址栏的静态布局视口计算且不更新，应使用min-height: 100vh兜底+@supports(min-height: 100dvh)包裹min-height: 100dvh规则，并对absolute/fixed元素改用top-0 bottom-0。
100vh 在 iOS Safari 和微信 WebView 里“差一截”是计算逻辑问题，不是写错了
它按页面加载时带地址栏的静态视口高度算——比如 iPhone 14 加载时地址栏占 70px，100vh 就锁死在 844px；滚动后地址栏收起，真实可视高度变成约 774px，但 100vh 不更新，结果就是底部留白、内容被裁、fixed 元素错位。iOS 15.x 及更早、微信 X5 内核完全不支持 100dvh，裸写等于没写。
@supports 必须包裹整条 CSS 规则，不能只包值
错误写法：.page { min-height: 100vh; min-height: 100dvh; } → 老 Safari 忽略第二行，新 Safari 仍走第一行，问题照旧。
正确结构必须分两层：
-
min-height: 100vh写在@supports外面，确保 iOS 15 等环境至少有基础高度 -
@supports (min-height: 100dvh)块内重写整个规则，不是只覆盖属性值 - Tailwind 中若用
min-h-[100dvh]，需确认 PostCSS 插件（如postcss-100vh-fix）已禁用，否则会把dvh错误降级为vh
position: absolute 或 fixed 元素设了 100dvh 没反应？那是包含块没高度
百分比高度（包括 100dvh）依赖父容器的「包含块」高度，不是“强制占满屏幕”。常见于弹窗遮罩、底部按钮等场景：
- 父容器（如
body或直接祖先）没设min-height: 100dvh或显式高度 → 子元素的100dvh实际计算为 0 - 别对
position: absolute或fixed元素用height: 100dvh，改用top-0 bottom-0（或inset-y-0 left-0）更可靠 - 侧边栏用
fixed时，inset-0在部分安卓 WebView 中行为异常，必须明确写inset-y-0 left-0
兼容 iOS 15 及以下必须用 JS 回退 --vh 变量
当用户存量含大量 iOS 15.x 或旧版 WebView 时，100dvh 会完全失效，页面塌成一条线。此时 JS 是唯一兜底手段：
- 必须在
DOMContentLoaded后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值 - 监听
visualviewport.resize事件（不是window.resize），后者不触发键盘弹起变化 - 初始值要兜底：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 安卓部分定制系统（如华为 EMUI）
visualViewport.height返回异常，需加校验：if (v.height > 0 && v.height
真正容易被忽略的，是没打开开发者工具逐层点开看 Computed 面板里每一层的 height 值——只要任一层是 auto，整个高度链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
