iOS Safari中vw/vh缩放失效的根源是缩放时不重计算单位值，应监听matchMedia('(resolution)')触发更新，并用CSS变量注入动态px值实现精准补偿。
vw/vh在iOS Safari中缩放失效的根源
不是单位本身有问题，而是iOS Safari在页面缩放（双指捏合）时，vw/vh仍按初始视口尺寸计算，不随缩放实时更新。用户放大后元素实际变小、文字模糊，本质是浏览器未触发视口单位重计算。
用matchMedia监听缩放比变化比轮询更轻量
轮询window.innerWidth或document.documentElement.clientWidth既不准又耗性能；iOS下缩放时这些值甚至不变。真正可靠的是监听matchMedia的(resolution)或(device-pixel-ratio)变化——虽然它不直接报缩放比，但能捕捉到渲染层缩放导致的DPR微调。
- 仅需监听
matchMedia('(resolution)')，iOS Safari缩放时会触发change事件 - 配合
window.visualViewport?.scale（Chrome/Edge支持，iOS Safari不支持）可覆盖更多场景 - 避免用
resize事件——它在iOS缩放时不触发
动态替换CSS变量比重写style更安全
直接修改element.style.width会覆盖原有CSS优先级，且无法响应媒体查询变化。推荐将vw值转为px后注入CSS自定义属性，再由CSS接管：
document.documentElement.style.setProperty('--header-height', `${window.innerHeight * 0.1}px`);对应CSS写成：height: var(--header-height, 10vh);，这样降级兜底清晰，也避免JS频繁操作DOM样式。
立即学习“前端免费学习笔记（深入）”；
- 只对明确需要缩放补偿的元素（如全屏Banner、固定高度导航）做转换，非必要不全局替换
- 转换前用
getComputedStyle(el).height读取原始vh值，避免硬编码系数 - 注意
vh在iOS Safari中还受地址栏显隐影响，需结合visualViewport?.height校准（若可用）
别依赖postcss-pxtovw类插件做运行时补偿
这类PostCSS工具只在构建时转换，生成的是静态px值，完全无法响应运行时缩放。所谓“JS插件补偿”，核心是监听+重计算+注入，不是靠某个npm包一键解决。
- 轻量方案：自己写20行
addEventListener('change', updateVwVh)就够了 - 警惕封装过重的库——它们常默认监听
resize，在iOS上根本无效 - 真要选库，确认它是否明确声明支持
visualViewport或matchMedia('(resolution)')回退
最麻烦的其实是状态同步：缩放后滚动位置、焦点元素、canvas绘图比例都可能错位，vw/vh只是冰山一角。
