移动端定位失效主因是渲染差异：百分比定位依赖父容器显式宽高与定位上下文；viewport 和设备像素比影响媒体查询；iOS Safari 存在 transform 与 overflow-scrolling 冲突；旧安卓 WebView 不支持 calc() 混合单位。
移动端元素偏移错位，用 left / top 百分比为什么不管用？
百分比定位（比如 left: 20%）的参照物是父容器的宽高，但很多情况下父容器没设 height，或者被 position: static 卡住，导致百分比计算结果为 0。更常见的是，父容器本身高度由内容撑开，而你在 JS 里动态插入元素后才触发渲染，此时百分比已按旧高度计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认父容器有明确
position值（relative、absolute或fixed），否则left/top百分比不生效 - 如果依赖视口尺寸，直接用
vw/vh（如left: 10vw），比百分比更可控 - 避免对
body或未设高的div使用top: 30%—— 它很可能算出 0px
媒体查询写 @media (max-width: 768px) 为啥在 iPhone 上不触发？
iPhone 的 viewport 缩放和设备像素比会让 CSS 像素和设备逻辑像素不一致，max-width 查的是 CSS 像素宽度，不是物理分辨率。例如 iPhone 13 的屏幕物理宽度是 1170px，但 viewport 默认设为 width=device-width 后，CSS 宽度只有 390px（3x 设备像素比）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 有正确的 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 调试时用浏览器开发者工具的「device toolbar」选具体机型，别只靠模拟
768px - 优先用
@media (max-width: 480px)或@media (max-width: 375px)覆盖主流小屏，而不是死守 768 - 真机测试前，先在 Safari 的「Responsive Design Mode」里关掉「Device Pixel Ratio」模拟失真
绝对定位元素在 iOS Safari 里突然“消失”或错位
这是 iOS Safari 的经典渲染 bug：当元素使用 position: absolute + transform（哪怕只是 translateZ(0)）+ 滚动容器有 -webkit-overflow-scrolling: touch 时，定位会失效或层级错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移除
-webkit-overflow-scrolling: touch（iOS 16+ 已废弃，且现代滚动行为默认平滑） - 避免对绝对定位元素叠加
transform和z-index混用，尤其不要用scale()改变布局尺寸 - 如果必须硬件加速，改用
will-change: transform替代空transform - 在 iOS 上测试时，打开「Settings > Safari > Advanced > Experimental Features」关掉「WebGPU」和「HTML Canvas Acceleration」可排除干扰
用 calc(50% - 20px) 做居中，为什么在某些安卓 WebView 里计算错误？
老版本安卓 WebView（特别是 Android 4.4~6.0 的 Chromium 30~50）对 calc() 的解析不支持混合单位运算，50% - 20px 可能被整个忽略或返回 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translate(-50%, -50%)配合left: 50%; top: 50%更兼容 - 如果必须用
calc()，加降级：先写left: 50%，再覆盖left: calc(50% - 20px)，老内核会忽略后一句但保留前一句 - 检查构建工具是否压缩了空格 ——
calc(50%-20px)在部分旧引擎里会解析失败，必须保留空格
移动端定位最麻烦的从来不是写法，而是不同系统对「同一段 CSS」的渲染解释权不一致。iOS 看见的是逻辑像素，安卓 WebView 看见的是内核版本，而用户手指划过的地方，永远比 devtools 里的盒子模型更难预测。
