text-size-adjust: 100% 必须作用于文本祖先容器(如html、body或块级父容器),而非input自身;需加!important防覆盖,且font-size≥16px才生效。

直接给 html 或 body 加 text-size-adjust: 100% 就能拦住大部分自动放大,但只写这一条大概率失效——关键得看它作用在谁身上、有没有被覆盖、以及字号是否真达标。
为什么 text-size-adjust: 100% 单独写在 input 上没用
这个属性必须作用于文本的祖先容器,不是输入框自己。iOS Safari 只对包含文本的块级上下文生效,input 是替换元素,它的文字渲染依赖父级(比如 form 或 body)的 text-size-adjust 设置。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
-
text-size-adjust不是“贴到元素上就管用”,它像一个开关,控制整个文本流是否允许浏览器干预字号 - 写在
input上等于没写,开发者工具里能看到 computed 值仍是auto - 正确位置是
html、body,或包裹输入框的最近块级容器(如.form-wrapper) - 加
!important很必要——UI 库(如 Ant Design Mobile)常在body上设-webkit-text-size-adjust: auto,不加权重要被盖掉
font-size 必须 ≥16px 才真正起效
text-size-adjust: 100% 只是“不放大”,前提是字体本身够大。iOS Safari 的触发阈值是最终渲染字号
- 用
rem单位时,如果根字号设成14px,那1rem就是 14px → 仍会放大 -
clamp(14px, 4vw, 16px)在窄屏下可能算出 15.2px → 还是低于阈值 - 推荐用绝对单位:
font-size: 16px或font-size: clamp(16px, 4vw, 18px)(下限锁死 16px) - 检查 computed font-size:打开真机调试,点开 input → Computed → 找
font-size,确认数值 ≥16
微信和 X5 内核要额外处理
微信内置浏览器(X5)对 text-size-adjust 支持不稳定,CSS 层面经常失效,必须补 JS 干预。
- 安卓微信:需调用
WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0})关闭系统级字体缩放 - iOS 微信:CSS 生效,但建议同时加
-webkit-text-size-adjust: 100% !important和text-size-adjust: 100% !important - 检测 UA 是否含
MicroMessenger,再决定是否注入 JS 逻辑,避免污染其他环境 - 注意时机:WeixinJSBridge 可能未就绪,要用
document.addEventListener('WeixinJSBridgeReady', ...)包一层
最易被忽略的是动态样式覆盖——Vue/React 组件 mount 后可能注入内联 style,把你的 font-size 覆盖掉;或者 rem 基准在横屏时重算,导致临界值抖动。别只信源码写的 16px,真机上查 computed 值才是唯一标准。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










