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 自身尺寸。这会导致子页面样式错乱，尤其在微前端场景中常见。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

实操建议：

• 给 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 当成“永远等于屏幕高度”——它从来就不是静态值，而是浏览器对当前可交互区域的实时反馈。要不要用、怎么用，得先看你的用户主要在什么设备上敲键盘。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！