移动端 fixed 元素错位的根本原因是 viewport 缩放和设备像素比（dpr）未对齐，导致视口坐标系与渲染坐标系脱节；需确保 viewport meta 标签包含 width=device-width、initial-scale=1.0、maximum-scale=1.0 且避免干扰祖先的 overflow/transform。
移动端 fixed 元素错位的根本原因是什么
不是 CSS 写错了，而是 viewport 缩放和设备像素比（dpr）没对齐。浏览器在高 DPR 设备（如 iPhone 14 的 dpr=3）上渲染 fixed 元素时，会按物理像素对齐定位锚点；但若 viewport 缺失或设置不当，页面被强制缩放，导致视口坐标系和渲染坐标系脱节——结果就是按钮飘到屏幕外、导航栏卡在半空。
必须检查的 viewport meta 标签三项配置
只写 不够，缺一不可：
-
width=device-width：让视口宽度等于设备逻辑宽度（非物理像素），这是 baseline -
initial-scale=1.0：禁用初始缩放，否则 iOS Safari 可能按字体大小重算缩放比例，破坏 fixed 定位基线 -
maximum-scale=1.0, user-scalable=no（可选但推荐）：防止用户双指缩放导致 fixed 元素相对视口偏移
完整写法：
fixed 元素自身宽度/定位值要避开“100vw”陷阱
100vw 在移动端 ≠ 屏幕可见宽度：它包含滚动条宽度（iOS Safari 下约 15px）、甚至某些安卓浏览器会把地址栏高度也算进去。用它做 left: 0; width: 100vw; 的 fixed 导航栏，右边必然溢出。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用
width: 100%;（相对于视口容器，更稳定） - 横向居中类 fixed 元素（如悬浮按钮），避免
right: 0;，改用transform: translateX(-50%); left: 50%; - 若必须撑满，用
width: -webkit-fill-available;（Safari 支持）或 JS 动态读取document.documentElement.clientWidth设置内联宽
遇到 iOS Safari fixed 错位，优先排查 overflow 和 transform 祖先元素
iOS Safari 对 fixed 定位有特殊限制：只要祖先元素存在 overflow: hidden|auto 或任意 transform（哪怕 transform: translateZ(0)），就会创建新的 containing block，使 fixed 元素相对该祖先定位，而非视口。
- 检查 DOM 结构中所有父级是否意外加了
overflow或transform - 临时调试：给疑似祖先加
outline: 1px solid red;，再看 fixed 元素是否随其移动 - 修复方式：移除无意义的
transform，或把 fixed 元素提到直接子级（需 JS 动态挂载）
真正棘手的是混合场景：viewport 设置正确 + 无干扰祖先 + 仍错位——这时大概率是 WebKit 的渲染管线在高 DPR 下对 subpixel 定位四舍五入异常，只能靠 will-change: transform; 或 backface-visibility: hidden; 触发独立图层缓解，但无法根治。
