如何用CSS解决iOS输入框字体小于16px自动缩放

Safari会放大字体是因为其仅依据最终计算出的font-size像素值是否≥16px来判断，而非CSS声明本身；需确保input、textarea等可聚焦元素在Computed中稳定≥16px，并配合-webkit-text-size-adjust: 100%同级声明。

为什么写了 font-size: 16px 还会放大

因为 Safari 不看你写的 CSS 声明，只看最终计算出的 font-size 像素值是否 ≥16px。常见失效场景包括：

1. html 根元素设了 font-size: 14px，再用 input { font-size: 1.143rem } → 实际 ≈ 15.99px（浮点误差触发放大）
2. 父容器有 font-size: 0.875em，子 input 未重置 → 继承后掉到 14px 以下
3. 用了 clamp(14px, 4vw, 18px)，在 320px 宽度下 4vw = 12.8px
4. Vant/Ant Design Mobile 等 UI 库动态注入内联样式，覆盖你写的 font-size

真机调试时必须打开 Safari 开发者工具，选中输入框，直接看 Computed 面板里的 font-size 值——不是源码，是渲染结果。

input、textarea、select 和 [contenteditable] 都要设

iOS 会检查所有能唤起键盘的元素，漏掉任何一个都可能放大。比如富文本编辑器根节点、Vue 封装的 v-model 绑定的 div[contenteditable]，都得覆盖。

1. 必须加 :focus 伪类：某些框架在 focus 时动态加 class，导致字号回落
2. 推荐写法：

   input, textarea, select, [contenteditable] {

   font-size: 16px !important;

   }

   input:focus, textarea:focus, select:focus, [contenteditable]:focus {

   font-size: 16px !important;

   }

3. 不要只靠 !important 撑着——它防不住 JS 动态插入的内联样式，得配合开发者工具验证最终值

-webkit-text-size-adjust: 100% 必须和 font-size 同级写

这个属性不是“禁用缩放”，而是阻止 Safari 对文本做二次重计算。它只在 font-size ≥ 16px 时才生效，且必须作用于具体元素上。

1. 错：写在 body 或 html 上 → 正文小字也变难读
2. 对：和 font-size 同级声明：

   input, textarea {

   font-size: 16px !important;

   -webkit-text-size-adjust: 100%;

   }

3. 别用 none：iOS 10+ 已废弃，部分版本反而失效；100% 是唯一稳妥值

viewport 的 user-scalable=no 不能替代 font-size

<meta name="viewport" content="... user-scalable=no"> 单独写无效，iOS 16+ 已部分忽略该行为，尤其在聚焦瞬间。

1. 必须搭配 maximum-scale=1.0 才可能起效，但仍有竞态风险（JS 监听 focus 比 meta 修改慢几毫秒）
2. 禁用缩放会彻底锁死用户双指操作，损害可访问性
3. 真正稳定的是让浏览器“觉得没必要放大”——也就是确保所有可聚焦元素的 computed font-size 稳定 ≥16px

最容易被忽略的，是字号在继承链、rem/em 计算、甚至 transform 缩放后的实际像素值。不查 Computed，光改 CSS 就像蒙眼调参。