iOS Safari 中 vw/vh 在键盘弹出时基于视觉视口计算导致 100vh 缩水，应避免直接使用 height: 100vh，改用 min-height: 100vh + height: 100% 或动态设置 --vh 变量配合 calc()；Android Chrome 中 vh 行为受分屏/缩放影响，推荐优先使用 flex/grid 布局或 dvh 单位；iframe 内 vw/vh 以顶层窗口为基准，需显式设置 iframe 尺寸并使用 allow="viewport"；Safari 中 clamp(1rem, 2.5vw, 1.5rem) 易引发字体闪动，建议统一用 px 替代 rem 并添加 will-change: font-size。
vw/vh 在 iOS Safari 中被键盘遮挡时失效
iOS Safari 的视口单位（vw/vh）在软键盘弹出时会基于「视觉视口」而非「布局视口」计算，导致 100vh 缩水——页面底部被截断、固定定位元素错位。这不是 bug，而是 Safari 对「动态视口变化」的主动响应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用
height: 100vh做全屏容器；改用min-height: 100vh+height: 100%组合，并确保父级（如html、body）也设为height: 100% - 对关键全屏模块（如登录页、引导页），监听
resize事件，用 JavaScript 动态设置style.height：const updateVh = () => { document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); }; window.addEventListener('resize', updateVh); updateVh();然后 CSS 中写height: calc(var(--vh, 1vh) * 100) - 注意：Safari 的
resize在键盘收起时可能触发多次，建议加setTimeout防抖
Android Chrome 中 vh 行为不一致（尤其折叠屏/分屏）
Android Chrome 对 vh 的解释依赖于设备是否启用「缩放」或处于多任务分屏模式。部分机型（如三星折叠屏展开后）会将 100vh 计算为「折叠状态下的高度」，造成内容溢出或留白。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不用
vh做绝对高度控制，优先用flex: 1或grid布局撑满容器 - 若必须用视口单位，搭配
@supports (height: 100dvh)使用dvh（动态视口高度）：@supports (height: 100dvh) { .full-height { height: 100dvh; } }dvh是 CSS Viewport Units Level 1 标准，Chrome 100+、Firefox 103+、Safari 16.4+ 支持，能正确响应键盘/工具栏伸缩 - 旧版兼容 fallback：用
100vh作降级，但需测试分屏下是否触发 layout shift
vw/vh 在 iframe 内部计算基准错误
当页面嵌入 iframe 且未显式设置 width/height 时，vw/vh 仍以顶层窗口为基准，而非 iframe 自身尺寸。这会导致子页面样式错乱，尤其在微前端场景中常见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
iframe设置明确宽高（如width: 100%; height: 500px），并添加allow="viewport"属性（部分浏览器需此权限才能正确继承视口） - 子页面内避免直接用
100vw布局；改用width: 100%+max-width: 100vw控制边界 - 若需精确适配，子页面可通过
window.parent.document.documentElement.clientWidth获取父窗口宽度，再通过document.documentElement.style.setProperty('--parent-vw', ...)注入 CSS 变量
rem + vw 混合响应式字体在 Safari 中渲染异常
用 font-size: clamp(1rem, 2.5vw, 1.5rem) 实现流体字号时，Safari（尤其是 iOS 15–16）可能出现字体忽大忽小、重排卡顿，原因是其对 clamp() 内 vw 单位的重绘策略较激进。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避开
clamp()中直接混用rem和vw；统一换算为vw：font-size: clamp(16px, 2.5vw, 24px)（1rem=16px） - 对关键文本（如标题），加
will-change: font-size提前提示渲染引擎，减少闪动 - 测试真机：模拟器无法复现 Safari 的字体重排延迟，务必在 iOS 实机上验证滚动时的字体稳定性
实际项目里最常踩的坑不是语法写错，而是默认把 vh 当成“永远等于屏幕高度”——它从来就不是静态值，而是浏览器对当前可交互区域的实时反馈。要不要用、怎么用，得先看你的用户主要在什么设备上敲键盘。
