text-size-adjust在ios和android微信表现不同，因ios safari支持-webkit-text-size-adjust，而android微信x5内核完全不解析该属性，且通过webview级settextzoom干预，css无法拦截。
text-size-adjust 为什么在 iOS 和 Android 微信里表现完全不同
不是写法错了，是内核根本不认同一个属性：iOS Safari 解析 -webkit-text-size-adjust，Android 微信用的是腾讯 X5 内核，压根不解析这个 CSS 属性——你在 body 上加再多 !important，getComputedStyle(document.body).webkitTextSizeAdjust 返回的仍是空字符串。
更麻烦的是，X5 不仅忽略 CSS，还通过 WebView 级别的 setTextZoom 动态干预整个页面字体缩放，CSS 层面完全不可见、不可拦截。
- iOS Safari 支持
-webkit-text-size-adjust: 100%（必须带前缀），但标准属性text-size-adjust: 100%在 Safari 16.4+ 才开始识别 - Android Chrome ≥ 53 支持无前缀
text-size-adjust: none或100%，但 X5 内核对两者都无视 - 华为 EMUI、小米 HyperOS 等定制 ROM 可能绕过
WeixinJSBridge，需 fallback 检测window.matchMedia('(min-resolution: 2dppx)')
必须写的三行 CSS：作用位置和取值都有硬要求
text-size-adjust 不是“设了就生效”，它只在文本的块级祖先上起作用，且不同平台对“祖先”的认定很苛刻。
- 全局最稳妥写法：
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }——html是唯一能覆盖所有动态插入节点的容器，body在某些 Vue/React hydration 场景下会漏掉首屏前渲染 - 别用
* { text-size-adjust: 100% }：旧版 Safari 可能忽略通配符，且会误伤input、select等表单控件的可访问性缩放 - 禁用自动缩放优先选
100%，不是none：iOS 13+ 已废弃none，部分机型直接忽略；none还会破坏系统级“增大文字”设置，影响无障碍体验
Android 微信必须补 JS：WeixinJSBridge 不是可选项
纯 CSS 在 X5 内核里等于没写。必须用 JS 主动接管字体缩放逻辑，而且时机比代码本身更重要。
- JS 必须放在
里，用document.addEventListener('WeixinJSBridgeReady', ...)监听，不能等DOMContentLoaded—— 否则页面已错位渲染完成才去修正，用户会看到明显闪动 - 核心调用：
WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})，其中0表示“系统默认字号”，不是“最小字号” - 必须监听
menu:setfont事件：用户手动点微信右上角「调整字体」时，会再次触发放大，不监听就会失效 - fallback 方案：当
typeof WeixinJSBridge === 'undefined'时，检测window.matchMedia('(min-resolution: 2dppx)')+ 动态重设document.documentElement.style.fontSize
横屏错位、输入框放大、菜单文字不一致的真正根源
这些现象看起来是样式问题，其实是浏览器在不同上下文里对同一段 CSS 做了不同层级的干预：iOS 对 <input> 单独启用放大逻辑，Android Chrome 用启发式算法判断“是否为关键导航文本”再决定是否缩放，而微信会把整个 WebView 的缩放比例塞进渲染管线。
- 解决输入框放大，光写
-webkit-text-size-adjust: 100%不够，input的最终计算字号必须 ≥16px，推荐直接写font-size: 16px !important，避免 rem/em 引入精度误差 - 菜单文字大小不一致，往往是因为
#bottommenublock被浏览器判定为“低权重文本块”，单独触发了缩放 —— 此时精准控制比全局声明更有效：#bottommenublock { text-size-adjust: 100%; } - 横屏时文字闪动，大概率是 JS 重设
html字体大小的时机晚于横屏重排，需监听orientationchange或resize并加防抖
真实项目里最容易被跳过的，是 viewport 的完整性和 JS 执行时机。哪怕 CSS 和桥接调用都写对了，只要 <meta name="viewport"> 缺失、顺序靠后、或写了 width=375 这类固定值，整个 text-size-adjust 就不会进入移动端渲染模式——浏览器直接按桌面逻辑解析，后面所有操作都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
