移动端最小安全字号为16px，iOS Safari强制重置小于16px的font-size，Android WebView降级为灰度模糊渲染；需用transform: scale()配合大字号绕过限制，并确保text-size-adjust: 100%内联于body。
移动端设 font-size: 10px 或 12px 会失效，不是你写错了，而是浏览器主动拦截并重置——iOS Safari 强制 ≥16px，Android WebView 和 X5 内核则在渲染层降级为灰度模糊态。真要显示极小字体（如标签、图标旁注、版权信息），必须绕过字号限制本身，而不是硬调 font-size。
为什么 font-size: 12px 在 Android 上反而更糊
Android 系统级文本渲染有隐式阈值：当计算后字号低于 16px，WebView 和旧版 Chrome 会放弃亚像素抗锯齿，改用低质量灰度渲染。结果是 12px 文字边缘发毛，“1”和“7”难区分，“口”“日”笔画粘连。MIUI、ColorOS 等定制 ROM 还会额外加一层缩放补偿，让 12px 实际渲染接近 14px，但仍是模糊态。
- 真机测试时，用
window.getComputedStyle(document.body).fontSize查看计算值，常发现返回的是"16px"而非你写的值 - 别信“设成 12px 就行”，这是最危险的幻觉
-
transform: scale(0.8)是常用解法，但必须配transform-origin，否则文字被裁切或偏移
用 transform: scale() 模拟小于 12px 的字体
这是目前兼容性最好、无 JS 依赖的方案，本质是先放大文字再缩小容器，绕过渲染层限制。
- 父容器设
font-size: 24px（确保 ≥16px），再用transform: scale(0.5)缩到视觉 12px - 必须加
transform-origin: 0 0或100% 100%，否则缩放中心偏移导致文字错位 - 若父容器有
line-height，需同步缩放，比如原line-height: 1.2→ 改为line-height: 0.6 - 慎用于可点击区域：
scale()不影响事件区域大小，按钮点击热区仍按放大前尺寸响应，需补min-width/min-height
text-size-adjust: 100% 必须写在 body 上才生效
iOS Safari 对 font-size < 16px 的强制放大行为不走 CSS cascade，而是底层渲染层直接重设行盒高度。只有作用在 body 才能覆盖该策略；写在 p、span 或 html 上均无效。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } - 禁用
none值：iOS 13+ 已废弃，且破坏系统字体设置，100%是唯一兼顾兼容与可访问性的取值 - 微信 X5 内核完全不支持该属性，需桥接 JS：
WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0}) - 这段 CSS 必须内联在 HTML
<head>中，Vue/React hydration 前就要存在，否则首屏已错位
真正安全的最小字号策略：所有关键文本最终计算值 ≥16px
不要试图“突破限制”，而应接受 16px 是移动端正文可读性的事实底线。所谓“极小字体”场景（如页脚版权、表单辅助提示）应通过设计降级实现，而非强行渲染模糊小字。
- 对
input、textarea单独加固：input, textarea { font-size: 16px !important; }，否则获焦时仍可能被二次干预 - 避免用
rem计算后跌破 16px：若html { font-size: 14px; }，那1rem就是 14px —— 直接踩雷 -
clamp()的中间值必须落在 min/max 区间内：比如clamp(16px, 4vw, 20px)，在 iPhone SE（375px）上 4vw ≈ 15px，仍低于 16px，浏览器直接取 min，等于白写 - 最容易被忽略的是
line-height：设了font-size: 16px但line-height: 1，行间挤压加剧字符粘连，建议搭配line-height: 1.5和letter-spacing: 0.02em
