移动端 font-size 小于 12px 会被系统强制设为 12px，无法通过 CSS 禁用；需用 transform: scale() 或 SVG 内嵌文本实现视觉小字号，禁用 -webkit-text-size-adjust 无效。
为什么 font-size: 10px 在移动端根本没用
不是浏览器“不支持”，而是系统级干预：Chrome（Android）、Safari（iOS）和 WebView 都会把计算后 font-size 小于 12px 的文本强制抬升到 12px 渲染。你写 font-size: 10px，开发者工具里看到的 computed 值就是 12px——连样式都没进渲染管线，缩放、抗锯齿全按 12px 走。这和用户可读性策略强绑定，无法通过 CSS 禁用。
想显示真正的小字号，只能绕过 font-size 限制
核心思路是：让 font-size 声明值 ≥12px，再用视觉手段“压小”。可行且稳定的方式只有两种：
-
transform: scale()最常用：设font-size: 12px，再用transform: scale(0.83)（≈10px 视觉大小），transform-origin推荐设为left top防止位置偏移 -
svg内嵌文本：对极小标注（如“®”“™”“注”）用<svg width="12" height="12"><text x="0" y="9" font-size="10">注</text></svg>，SVG 不受浏览器最小字号限制
别用 -webkit-text-size-adjust: none —— 已被 Safari 和 Chrome 废弃，写上去毫无效果；也别信“改浏览器设置就能调试”，那只是开发机临时 hack，上线后无效。
iOS 输入框放大问题必须和字体大小解耦处理
iOS Safari 对 <input> 和 <textarea></textarea> 的自动放大，触发条件是「最终渲染字号
立即学习“前端免费学习笔记（深入）”；
- 给表单控件单独加固：
input, textarea { font-size: 16px !important; -webkit-text-size-adjust: 100%; } - 禁用继承干扰：不要依赖
html { font-size: 14px; }+p { font-size: 0.857rem; }这种链式计算，它在某些机型上会因浮点误差落到 15.98px，照样放大 - viewport 必须干净：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，删掉所有user-scalable相关字段
Android 上 12px 比 16px 更糊，这事很多人搞反了
Android 系统文本渲染有隐式阈值：低于 16px 时放弃亚像素抗锯齿，改用灰度渲染。结果就是 font-size: 12px 在 Galaxy S23 上比 16px 更发毛，“口”“日”笔画粘连，“1”和“7”难区分。所以：
- 正文、按钮、标签等关键文本，确保最终计算值 ≥
16px，不是“不低于 12px” - 用
rem时，根字号不能设12px；html { font-size: 16px; }才是安全起点 -
line-height和letter-spacing得同步调：比如font-size: 16px; line-height: 1.5; letter-spacing: 0.02em;，否则光字号达标也糊
最易忽略的是：WebView 内核版本碎片化严重，Android 12 以下的 WebView 对 clamp()、em 计算常有精度偏差，直接写死 16px 反而最稳。
