移动端 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 导航栏，右边必然溢出。
