-webkit-text-size-adjust: 100% 仅阻止 Safari 对≥16px文本的内部重计算，不控制缩放；必须配合 input 等元素 font-size≥16px（px 单位）、完整 viewport meta 及防框架覆盖样式才生效。
为什么 -webkit-text-size-adjust: 100% 单独用没用
这个属性常被误认为“一设就灵”，但实际它只负责阻止 Safari 对文本的**内部字号重计算**，不干预视口缩放逻辑。如果 input 的最终渲染 font-size 小于 16px，哪怕加了 -webkit-text-size-adjust: 100%，iOS 仍会放大页面。
常见错误现象：
- 写了
-webkit-text-size-adjust: 100%，但开发者工具「Computed」里看到font-size是14px - 全局设在
body上，结果正文小字也变难读，得不偿失 - 用了
rem单位，根元素font-size被设成12px，导致1.333rem算出来还是16px—— 表面达标，实则因精度误差或缩放抖动掉到临界值以下
必须和 font-size ≥16px 配合使用
-webkit-text-size-adjust: 100% 是“防守型”补丁，真正起决定作用的是计算后字号是否 ≥16px。它只在字号达标的前提下，封堵 Safari 的二次干预。
推荐写法（直接作用于表单控件）：
立即学习“前端免费学习笔记（深入）”；
input,
textarea,
select {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
关键点：
- 必须用
px或等效绝对单位（如clamp(16px, 4vw, 18px)），避免em/rem引入间接压缩 - 要加
!important—— 尤其在用 Ant Design Mobile、Vant 等 UI 库时，它们的样式优先级可能覆盖你写的规则 - 不能只写
input，textarea和select同样触发放大，必须一并处理
Vue/React 项目里容易被 JS 动态覆盖
框架组件（比如 <van-field></van-field> 或 <a-input></a-input>）可能在 mounted 时注入内联样式，或者通过 CSS-in-JS 动态生成 class，把你的 font-size 覆盖掉。
验证方式不是看源码 CSS 文件，而是打开 Safari 开发者工具 → 选中输入框 → 切到「Computed」面板，直接查 font-size 的最终值。
应对建议：
- 用更强制的选择器，例如
input:not([type="hidden"]) !important - 在
<style scoped></style>中加deep或/deep/（Vue 2）穿透组件样式 - 若用 Tailwind，别依赖
text-base这类抽象类，显式写text-[16px]
viewport meta 必须提前且完整
-webkit-text-size-adjust 和 font-size 再准，如果 <meta name="viewport"> 缺了 minimum-scale=1.0 或 maximum-scale=1.0，iOS 仍可能 fallback 到旧缩放逻辑。
正确写法（必须放在 最顶部，不能由 JS 插入）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
注意：
-
user-scalable=no在 iOS 10+ 已被忽略，不必加，加了反而让部分 Android WebView 行为异常 - 该标签必须在任何 CSS 加载前就存在，否则 Safari 可能在解析完 CSS 前已按默认规则触发一次放大
-webkit-text-size-adjust，而是 computed font-size 没盯住、viewport 没压住、框架样式没防住——三者缺一，都会让那 1px 的临界值失效。 
