移动端letter-spacing需用clamp(0.02em, 0.15vw, 0.08em)适配多屏，禁用px/%，须同步调整line-height和word-break，并为旧安卓webview提供em降级，中英文混排需单独处理。
移动端 letter-spacing 不能用 px
直接写 letter-spacing: 1.2px 在 iPhone SE 和 Pixel 4 上表现完全不同：Retina 屏文字发虚，小屏上字距撑开导致“JavaScript”在“Java”后换行。根本原因是浏览器按物理像素渲染字距，而 px 不随缩放逻辑变化——rem 和 em 也无效，因为它们依赖根字号，但字距本身不继承字体缩放关系。
必须用视口单位配合阈值限制：letter-spacing: clamp(0.02em, 0.15vw, 0.08em)。其中：
-
0.02em防止超小屏（如 iPhone SE）文字挤成一团 -
0.08em封顶，避免 iPad 大屏过度拉开 -
0.15vw是核心调节项，100vw 宽时 ≈ 15% 字体大小，视觉节奏更自然
别用 % 单位——CSS 不支持 letter-spacing: 2%，会直接失效。
line-height 和 word-break 必须同步调
只改 letter-spacing 不动 line-height，窄屏上文字会“浮起来”：字距拉宽后视觉重心上移，行间空隙变松散甚至割裂。这不是错觉，是真实渲染偏移。
推荐搭配使用：
-
line-height: clamp(1.3, 1.4 - 0.001vw, 1.5)（数值微调即可，无需强耦合） - 中文场景必加
word-break: keep-all，否则letter-spacing可能触发非预期断行，比如把“微信小程序”在“微信”后硬切 - 禁用连字：
font-feature-settings: "liga" 0，尤其用思源黑体或 Noto Sans SC 时，liga会和字距冲突，导致字符连接异常
旧安卓 WebView 需要 em 降级
iOS Safari 15.4+、Chrome 94+ 支持 clamp()，但 Android 4.4–6.0 的 WebView 内核不认它，会回退到默认值（通常是 normal），排版直接崩。
安全写法是叠加声明，让老内核 fallback 到可控值：
h1 {
letter-spacing: 0.04em;
letter-spacing: clamp(0.02em, 0.15vw, 0.08em);
}
注意顺序：老属性在前，新属性在后。浏览器遇到不支持的声明会忽略，继续解析下一行。
设计稿给的 px 值不能直接照搬
设计师标注“标题字距 1.2px”，这个数字对开发毫无意义——它没经过真机验证，也不含设备上下文。最省事的方式是拿三台真机（iPhone SE、Pixel 4、iPad Air）实测：在 Safari 和 Chrome 开发者工具里手动拖动 vw 值，观察字距变化是否线性、是否在临界宽度突变。调十次不如现场测一次，这点没人提，但它是落地关键。
真正麻烦的是中英文混排场景：英文字母受 letter-spacing 影响明显，汉字几乎无感。如果标题含“iOS 18”，得单独给 <span>iOS</span> 加 class 控制，否则整体字距会失衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
