initial-letter 在移动端基本不可用，仅 Safari 16.4+ 和 Chrome 120+（需手动开启实验功能）部分支持，Firefox 完全不支持，Android WebView 无响应；实际覆盖率不足 20%，而 ::first-letter 配合 float、line-height 和响应式 font-size 才是可靠方案。
initial-letter 在移动端**不能用**，不是“调不好”，而是根本不会渲染。
Safari 16.4+ 和 Chrome 120+（需手动开启 chrome://flags/#enable-experimental-web-platform-features）才支持，Firefox 完全无视，Android WebView 基本无响应。2026 年 Q1 全网实际覆盖率不足 20%，线上项目启用等于主动放弃超八成用户。
为什么 initial-letter 在移动端写上就失效
它不是兼容性“差一点”，而是触发条件极其苛刻，且移动端 WebView 几乎不满足：
-
initial-letter只作用于块级容器中「第一个子节点为纯文本」的首字符——<p><span>文</span>字</p>中的“文”不会被选中 - Android 系统 WebView（包括微信、QQ、支付宝内嵌浏览器）至今未实现该属性，查
getComputedStyle(p).initialLetter返回空字符串 - 即使 Safari 16.4+ 渲染了，中文段落常出现首字偏移、底部截断或行高计算失准——因为中文字体 ascender/descender 未被正确计入
- 值必须是整数：
initial-letter: 3.5或initial-letter: 3em直接被忽略，没有 warning，静默失败
::first-letter 是唯一可行路径，但必须配齐三要素
所有主流移动端浏览器（iOS Safari、Chrome for Android、微信 X5 内核）都稳定支持 ::first-letter，但它不是“设个 font-size 就完事”。缺以下任一，效果就断：
-
float: left：不加这个，文字不会环绕，只是首字变大、整行被顶高 -
line-height: 0.7–0.85（无单位）：必须压低，否则放大后的首字按父级line-height撑开第一行，第二行文字下坠 -
font-size需用clamp(2rem, 4vw, 3.5rem)或类似响应式写法——固定3em在小屏 iPhone 上可能占半屏，在大屏 iPad 上又太小
移动端特有的排版陷阱与绕过方式
字体加载、系统缩放、WebView 渲染机制会联合制造错位：
- 首字刚加载时跳动：系统 fallback 字体先渲染，重绘后按新字体重算
::first-letter的尺寸和基线，导致上跳。解决方法是用@font-face的font-display: optional或监听document.fonts.load()后强制重排 - 双击放大后首字被裁：iOS Safari 对
float + ::first-letter组合偶有锚点偏移。给父容器加overflow: hidden可强制重建 BFC，稳定定位 - 别用
transform: translateY()微调垂直位置——它会让后续文字 baseline 失准，尤其在动态缩放或字体加载完成时产生二次偏移 - 中文标点开头（如《、【、“）会被当首字符放大。若业务不允许，前端可用正则提取首个汉字：
text.replace(/^[\u3000-\u303f\uf900-\uf9fc\uff00-\uffef\u2000-\u206f\uff01-\uff5e]+/, '')[0]，再包裹为<span class="dropcap"></span>单独控制
initial-letter “一键生效”，只会在线上看到大量用户看到的仍是平平无奇的普通段落首字。 
