必须添加viewport meta标签，否则手机浏览器按桌面宽度渲染导致文字过小、缩放失效；推荐写法为<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">。
viewport meta 标签漏写或写错
不加 <meta name="viewport">，手机浏览器会按桌面宽度渲染（通常是 980px 左右），文字小得看不清，缩放失灵——这是最常见、最根本的适配失败原因。
- 必须写在
<head>里，且优先级高于其他样式 - 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> -
user-scalable=no要谨慎：部分场景（如视力障碍用户）需要缩放，上线前确认产品需求是否允许禁用 - 别写成
width=375或固定像素值——设备宽度千差万别，device-width才是动态取当前设备逻辑宽度
CSS 中 px 单位在高 DPR 屏幕上模糊
iPhone 14 Pro 的 DPR 是 3，1px CSS 像素实际占 3 物理像素，但直接设 border: 1px solid #000 会被系统“抹平”成发虚的线——这不是 bug，是渲染机制。
- 用
transform: scaleY(0.33)配合origin拉伸容器，让边框物理像素对齐（兼容性好，iOS/Android 都行） - 更现代的做法：用
border: 1px solid #000+transform: scale(0.5)同时缩放整个元素（注意会影响子元素字体大小） - 别依赖
media query查min-resolution来切单位——安卓碎片化严重，不如用 JS 动态注入 class 判断window.devicePixelRatio
flex 布局在 iOS Safari 旧版本中塌陷
iOS 9.3 的 Safari 对 flex: 1 和 min-height: 100vh 组合支持极差，父容器没显式高度时，子项直接消失——不是代码写错，是引擎解析逻辑缺陷。
- 给 flex 容器加
min-height: 100vh不够，还得补height: 100vh（双写，旧版 Safari 只认后者） - 避免对
flex: 1元素再设height: 100%，容易触发循环计算，某些安卓 WebView 直接白屏 - 测试真机不能只靠 Chrome DevTools 的 device mode——它模拟 DPR 和 UA，但不模拟 WebKit 渲染内核差异
字体大小在 iOS 上被自动放大
当 <p> 或 <div> 里纯文本字号小于 16px，iOS Safari 会强制放大到 16px 以保可读性——你写的 font-size: 14px 白写了。
立即学习“前端免费学习笔记（深入）”；
- 加
-webkit-text-size-adjust: 100%关闭自动调整（注意：全局加可能影响阅读体验，建议只对特定容器） - 更稳妥的方式：用
rem或em基于根字体设置，配合html { font-size: 16px }确保基准稳定 - 别用
!important强盖系统行为——WebKit 会忽略它，得从根源控制触发条件
真机适配从来不是“写完再测”，而是每改一行样式，就要想清楚它在 iPhone SE（DPR=2）、华为 Mate 50（DPR=3.5）、低端安卓（Webkit 内核陈旧）上分别怎么画。那些看不见的渲染路径，比代码本身更决定最终效果。
