如何用CSS让移动端输入框获得焦点时不放大

根本原因是Safari检查的是computed font-size而非CSS声明值；常见问题包括rem换算浮点误差（如15.99px）、父级em继承导致缩水、clamp在小屏下低于16px，以及UI库动态覆盖样式。

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

不是 CSS 没生效，而是 Safari 看的是最终计算值（computed font-size），不是你写的那行声明。常见掉坑点：

1. html { font-size: 14px } + input { font-size: 1.143rem } → 实际算出来可能是 15.99px，Safari 判为
2. 父容器设了 font-size: 0.875em，子 input 继承后直接掉到 14px
3. 用了 clamp(14px, 4vw, 18px)，小屏下 4vw 在 320px 宽度上仅 12.8px
4. UI 库（如 Vant）把 font-size 写进内联 style，你的 CSS 被覆盖

查「Computed」面板确认真实值，别信源码里写的那行。

input:focus 页面放大时必须同时覆盖的元素和伪类

只写 input 不够，iOS 会检查所有能唤起键盘的元素，且聚焦态不能意外重置字号：

1. 必须覆盖：input、textarea、select、[contenteditable]
2. 必须加 :focus 伪类规则——否则某些框架在 focus 时动态加 class 可能导致字号回落
3. 推荐写法：

   input, textarea, select, [contenteditable] { font-size: 16px !important; }
   input:focus, textarea:focus, select:focus, [contenteditable]:focus { font-size: 16px !important; }

-webkit-text-size-adjust: 100% 的正确用法

这个属性不是“禁用缩放”，而是阻止 Safari 对文本做二次字号重计算。它只在 font-size ≥ 16px 时起效，且必须和字号同级写在表单元素上：

1. 错：写在 body 上 → 正文小字也变难读，且对输入框无效
2. 对：和 font-size 一起写在目标元素上，例如：

   input, textarea {
   font-size: 16px !important;
   -webkit-text-size-adjust: 100%;
   }

3. 单独写 -webkit-text-size-adjust: 100% 但没配 font-size: 16px，完全不生效

viewport meta 标签只是辅助，不是解药

<meta name="viewport" content="width=device-width, maximum-scale=1.0"> 本身无法拦截聚焦放大：

1. maximum-scale=1.0 只约束用户主动缩放行为，不拦截系统自动缩放逻辑
2. 缺失 width=device-width 会导致 viewport 解析异常，让 scale 设置整体失效
3. iOS 15.4+ 对 user-scalable=no 处理更宽松，不能依赖它锁死缩放
4. 真正起效的是组合策略：CSS 确保字号 ≥16px + JS 动态控制 viewport（聚焦时临时设 maximum-scale=1.0，失焦后恢复）

最常被忽略的一点：所有可聚焦元素的 computed font-size 必须稳定 ≥16px —— 浮点误差、继承链、框架注入样式，任何一个环节松动，放大就回来。