iOS支持-webkit-text-size-adjust，Android微信X5内核不支持该属性；需用WeixinJSBridge.setFontSizeCallback配合html{text-size-adjust:100%}等多层兼容方案。
为什么 -webkit-text-size-adjust 在 iOS 上有效但在 Android 微信里没用
因为 iOS WebKit 内核真会读这个 CSS 属性，而 Android 微信的 X5 内核压根不支持它。你在 Android 上加 body { -webkit-text-size-adjust: 100% !important; }，控制台查 getComputedStyle(document.body).webkitTextSizeAdjust 会返回 ""（空字符串），说明属性被忽略。这不是写法问题，是内核不认。
-webkit-text-size-adjust 的取值差异和实际效果
这个属性只在 Safari 和部分 iOS WebView 中起作用，常见取值有三个：
-
none：禁用自动调整，但已被现代 Safari 弃用，部分机型会直接忽略 -
100%：强制还原为原始字体大小，目前最稳妥的选择 -
auto（默认）：允许浏览器根据上下文缩放，正是导致错乱的源头
注意：!important 必须加，否则可能被微信内置样式覆盖；且必须作用于 body 或根级容器，子元素上设无效。
只靠 CSS 无法解决 Android 微信字体放大问题
Android 微信改的是整个 WebView 的文本缩放比例（setTextZoom），不是单个元素的渲染逻辑。CSS 层面完全不可见、不可干预。此时必须依赖 JS 桥接：
- 等待
WeixinJSBridgeReady事件，确保桥接对象就绪 - 调用
WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})，其中0表示“使用系统默认字号”，不是“最小字号” - 还要监听
menu:setfont事件，防止用户手动点菜单再次触发放大
这段 JS 必须放在 尽早执行，不能等 DOMContentLoaded —— 否则页面已渲染错乱才去修正，用户会看到闪动。
容易被忽略的兼容性细节
真实项目里踩坑最多的是这几个点：
- iOS 16+ 对
-webkit-text-size-adjust的拦截更严格，建议同时加html { text-size-adjust: 100%; }（标准属性，Safari 16.4+ 支持） - 某些 Android 厂商定制 ROM（如华为 EMUI）会绕过 WeixinJSBridge，需 fallback 到检测
window.matchMedia('(min-resolution: 2dppx)')+ 动态重设html的font-size - 如果页面用了
rem基准，-webkit-text-size-adjust: 100%只影响文字，不影响rem计算——这意味着布局仍可能因行高/内边距失衡而错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
