优先用100dvh替代100vh，它能动态响应键盘和地址栏变化；但ios 16.4+才支持，需用@supports降级回退至100vh+js监听window.innerheight微调。
100vh 在 iOS Safari 里被键盘顶穿怎么办
直接用 100vh 做全屏高度，在软键盘弹出时内容会被遮挡或底部留白——这不是 bug，是浏览器按 layout viewport 计算导致的。iOS Safari 和部分安卓 WebView 的 vh 不响应 visual viewport 变化。
优先改用 100dvh：height: 100dvh; 能动态响应键盘、地址栏收起/展开；但要注意兼容性断层：iOS Safari 16.4+ 才支持，当前仍有约 12% 活跃设备运行 iOS 15.x（完全忽略该声明）。
- 降级方案必须写
@supports not (height: 100dvh)包裹 fallback，比如回退到height: 100vh+ JS 监听window.innerHeight微调 - 别给
或设height: 100vh，容易触发 iOS 滚动异常；改用 wrapper div +min-height: 100dvh - 实测发现 Chrome 120+、Safari 16.4+ 已稳定支持
dvh，但旧版本 fallback 必须存在且生效
横屏切换后 vw/vh 突然反向计算怎么修
横屏瞬间，100vw 可能变成“屏幕物理高度”，100vh 缩成“屏幕物理宽度”——这不是你写错了，是浏览器在 orientationchange 动画帧中 CSS 已重绘，但 document.documentElement.clientHeight 还没更新。
别用 window.orientation（iOS 15+ 返回始终为 0），也别在 orientationchange 回调里直接改 class 或 inline style，容易和渲染节奏冲突。
- 用
matchMedia('(orientation: portrait)')和'(orientation: landscape)'分别监听，每次change时执行setVH()函数重新注入--vh变量 -
setVH()内部读取window.innerHeight（它比100vh真实，但不如100dvh自动响应滚动） - CSS 中写
height: calc(var(--vh, 100vh) * 1);，加* 1是为强制重绘，避免部分安卓机型缓存变量
混用 vw 和 vh 导致元素拉伸变形的根本原因
写 width: 80vw; height: 80vh; 看似对称，实际是把宽锚定在视口宽度、高锚定在视口高度——而这两者随设备变化完全不协同。iPhone 14 Pro Max 宽高比约 1:2.25，iPad mini 约 3:4，同一套值渲染出的矩形宽高比完全不同。
常见错误现象：图片被压扁、文字排版错位、按钮高度突兀、轮播图裁剪不一致。
- 真正安全的场景是「单向依赖」：如全屏背景用
height: 100vh;+background-size: cover;，字体用font-size: clamp(16px, 4vw, 24px); - 要保持正方形容器，用
width: 20vmin; height: 20vmin;，vmin取宽高中较小值，天然防变形 - 设计稿换算需 PostCSS 插件（如
postcss-pxtoviewport）精准转换，不能靠脑算 375px → 100vw
viewport 设置不规范引发的 vw/vh 偏差
vw/vh 锚定的是 layout viewport，不是物理屏幕。如果漏写 <meta name="viewport" content="width=device-width, initial-scale=1">，100vw 可能等于 980px（默认 layout viewport），而不是预期的 390px。
百分比单位则依赖父容器，而父元素 height: auto 时 height: 50% 会算出 0 —— 这就是为什么“设了 height: 100% 却没效果”的高频问题。
- 安卓旧版 UC 浏览器对
vmax/vmin支持不全，用前必须加@supports检测 - iOS Safari 地址栏收起/展开时会触发
vh重算，导致 fixed 元素跳变，应优先用100dvh或env(safe-area-inset-bottom)替代硬编码 - 首次加载时
window.matchMedia('(orientation: landscape)').matches需立即执行，否则首屏按竖屏规则渲染，媒体查询来不及介入
关键点在于：vw/vh 不是“自动适配神器”，它们只是静态锚定 layout viewport 的两个独立维度。真正稳定的方案永远是组合使用——dvh 应对键盘、vmin 防变形、matchMedia 修正横屏、PostCSS 控制精度，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
