移动端缩放导致fixed元素错位，因锚定视口坐标系；应优先用sticky或dvh替代，必要时监听visualViewport动态调整，且user-scalable=no需配合max/min-scale才有效。
移动端缩放导致position: fixed元素错位
视口缩放（比如双指放大）会让fixed元素脱离预期位置，尤其在 iOS Safari 中常见——它会“卡住”在缩放前的坐标系里，不随页面内容一起重排。这不是 bug，是浏览器对fixed的实现策略：它锚定在视口（viewport）坐标系，而缩放会改变视口逻辑尺寸与物理像素的映射关系。
- 别依赖
fixed做关键交互层（如底部操作栏），缩放后点击区域可能偏移 - 用
position: sticky替代部分场景，它受容器滚动影响，不直接受缩放干扰 - 若必须用
fixed，配合window.visualViewport监听缩放变化，动态调整top/left（仅现代浏览器支持）
meta name="viewport"里user-scalable=no到底管不管用
加了user-scalable=no也不等于彻底禁掉缩放。iOS 10+ Safari 仍允许通过辅助功能（如“更大字体”或“显示缩放”）触发强制缩放；Android Chrome 在某些系统设置下也会绕过该声明。它只是告诉浏览器“默认不开放手势缩放”，不是安全锁。
- 真要防缩放，得配合
maximum-scale=1.0和minimum-scale=1.0，三者缺一不可 - 但注意：
maximum-scale=1.0会导致 iOS 上“双击放大”失效，用户无法快速聚焦文字，可访问性受损 - 很多 WCAG 合规检查会直接报
user-scalable=no为问题项，除非有明确无障碍替代方案
缩放时vh/vw单位行为异常
缩放后100vh可能远大于屏幕实际高度，尤其在 iOS Safari 中——因为vh基于初始视口高度计算，缩放后不重新求值。结果就是height: 100vh的弹层拉出一大截白底，或者遮不住背景。
- 避免在关键布局中单独依赖
vh做全屏占位，改用min-height: 100dvh（dvh是动态视口单位，响应缩放） -
dvh兼容性需查 CanIUse：Chrome 105+、Safari 16.4+、Firefox 110+ 支持，旧版本 fallback 回vh即可 - 如果用 JS 读取
document.documentElement.clientHeight，缩放后该值不变，要用window.visualViewport.height才准
为什么visualViewport resize 事件不总触发
window.visualViewport.addEventListener('resize', ...)在 iOS 上对“双指缩放”响应滞后甚至丢失，尤其快速连续缩放时。这是因为 Safari 的视觉视口更新与渲染线程不同步，事件可能被合并或丢弃。
立即学习“前端免费学习笔记（深入）”；
- 别只靠
resize事件做实时修正，加一个scroll事件兜底（缩放常伴随轻微滚动） - 用
requestAnimationFrame节流处理回调，避免重复计算 - 判断是否真发生了缩放变化，比对
visualViewport.scale前后值，而非只信事件本身
缩放相关的定位问题，核心不在 CSS 写法多复杂，而在你是否意识到：移动端的“视口”从来不是静态画布，它随时可能被用户、系统、辅助功能重新定义。盯着fixed调样式，不如先看visualViewport.scale和dvh能不能接住变化。
