移动端首字下沉必须用::first-letter，因initial-letter兼容性差；需用clamp()控制字号与行高，float: left配合rem/em间距，并设父容器overflow: hidden防错位。
initial-letter在移动端根本不能用
它目前只在 Safari 16.4+ 和 Chrome 119+（需手动开启 chrome://flags/#enable-experimental-web-platform-features）中部分支持，Firefox 完全不识别，Android WebView 基本无响应。线上项目启用等于主动放弃 80% 以上真实用户流量。
移动端首字下沉必须回退到 ::first-letter
这是唯一能在 iOS/Android 主流 WebView 中稳定生效的方案，但有三个关键点要调：
- font-size 必须用 clamp() 控制区间，比如 clamp(2rem, 8vw, 4rem)，避免小屏撑满半屏或大屏缩成小点
- line-height 必须配无单位值（如 0.75），且同样建议用 clamp(0.7, 3vmin, 0.85)，因为视口缩放时固定值会错位
- float: left 后，margin-right 要按 em 或 rem 设，别用像素——否则字体缩放后间隙失衡
移动端特有的渲染陷阱：字体加载与缩放干扰
常见现象是首字刚加载时位置偏移、后续文字上跳，或双击放大后首字被裁切。原因有两个：
- 系统字体未就绪时，浏览器先用 fallback 字体渲染，::first-letter 的 line-height 和 font-size 按错误度量计算，重绘后错位
- iOS Safari 对 float + ::first-letter 组合偶有浮动锚点偏移，加 overflow: hidden 到父容器可强制重排并稳定定位
- 不要用 transform: translateY() 微调首字垂直位置——它会让后续文字 baseline 失准，尤其在动态缩放场景下
真正在意排版精度时，别碰伪元素
如果项目要求首字严格下沉三行、右侧文字紧密环绕、还要适配思源黑体/苹方/Noto Sans CJK 等不同中文字体的字怀差异，::first-letter 的不可控性会快速上升。此时更可靠的做法是：
- 服务端或构建时用正则提取首字符（/^[\u4e00-\u9fa5\w]/），包裹为 <span class="dropcap"></span>
- CSS 中对 .dropcap 单独控制 float、line-height、margin，并用 @font-face 加载完成事件触发重排
- 所有尺寸单位统一走 vmin 或 rem，避开设备像素比和系统字体缩放的双重干扰
