text-size-adjust: none 在 iOS 上无效，因 Safari 自 2017 年起已废弃该属性；Android WebView 仍依赖它，需同时声明标准与 -webkit- 前缀版本。
字体模糊不是因为缩放本身，而是视口被宿主 App 强制重写后，浏览器用错误的逻辑像素做字体渲染——text-size-adjust 被禁用、font-size 计算失准、系统级缩放未对齐 CSS 单位，三者叠加导致文字发虚。
为什么 text-size-adjust: none 在 iOS 上无效
iOS Safari 早在 2017 年就废弃了 text-size-adjust，无论你写 none 还是 100%，它都不起作用。但 Android WebView（尤其旧版）仍依赖它来阻止系统字体缩放干扰布局。
- Android 端必须加：
html { text-size-adjust: none; -webkit-text-size-adjust: none; } - iOS 端加了也无害，但别指望它解决模糊——那是错判根源
- 如果用了 Tailwind 或现代 CSS 重置库，检查是否被覆盖：
text-size-adjust: auto是默认值，会放行系统缩放
font-size 用 rem/vw/clamp() 哪种更稳
rem 依赖 html 的 font-size，而宿主 App 可能动态改 initial-scale，导致根字号计算偏移；vw 直接绑定视觉宽度，但滚动时 window.innerWidth 不稳定；clamp() 是目前最可靠的选择，它不依赖 JS，也不怕 scale 变动。
- 推荐写法：
font-size: clamp(14px, 4vw, 18px);—— 下限保可读性，上限防过大，中间段随视口线性变化 - 避免纯
vw：font-size: 4vw在 iPhone 15 Pro（852px 高）上可能达 34px，远超设计预期 - rem 方案若坚持用，必须配合
visualViewport?.scale动态修正：document.documentElement.style.fontSize = (16 * visualViewport?.scale) + 'px';，但仅限 Chrome 79+/Safari 15.4+
系统“大字体”设置下字体依然模糊怎么办
用户在 iOS 设置 → 显示与亮度 → 文字大小调到“最大”，或 Android 设置 → 辅助功能 → 字体大小设为“超大”，此时即使你写了 clamp()，系统仍会二次放大渲染后的文本位图，造成锯齿和模糊。
立即学习“前端免费学习笔记（深入）”；
- 唯一有效缓解：用
-webkit-font-smoothing: antialiased（仅 Safari）+font-smooth: always（仅旧 Firefox），但不能根治 - 关键规避点：避免给文字容器设
transform: scale()或zoom，这会让系统放大倍数叠加 - 深色模式下更明显——检查是否漏写了
color-scheme: light dark，缺失会导致系统强制 fallback 渲染逻辑
真正难处理的不是“怎么让字变清楚”，而是“怎么让浏览器相信它正在按真实物理像素渲染”。visualViewport.width、100dvh、clamp() 这三者必须协同使用，缺一不可；任何单独调整都只是在补洞，而不是重建基准。
