为什么iOS Safari会自动放大输入框
iOS Safari有个隐藏规则：当 <input> 或 <textarea> 的计算后 font-size 小于 16px，且没有设置 viewport 的 user-scalable=no（不推荐禁用缩放），就会触发自动放大，目的是提升可读性——但实际常导致布局跳变、焦点错位。
font-size 设置成 16px 就一定不放大？
不一定。关键看「最终渲染的字号」，不是 CSS 声明值：
-
font-size: 14px+transform: scale(1.2)→ 渲染字号 ≈ 16.8px，通常不放大 -
font-size: 16px但父元素有font-size: 0.875rem且根字号被设为14px→ 实际是14 × 0.875 = 12.25px，仍会放大 -
font-size: clamp(14px, 4vw, 16px)在小屏下可能落到 14px 以下，风险仍在
真正可靠的写法是确保最终计算值 ≥ 16px，且避免依赖相对单位间接压缩。
更稳妥的解决方案组合
单靠 font-size 治标不治本。推荐三步并行：
立即学习“前端免费学习笔记（深入）”；
- 给所有表单控件显式设置
font-size: 16px（或等效值），用!important防止被覆盖（尤其在 UI 库中） - 在
<head>中确认<meta name="viewport" content="width=device-width, initial-scale=1.0">，去掉user-scalable相关字段 - 对
<input type="text">、<textarea>等添加-webkit-text-size-adjust: 100%，阻止 Safari 主动干预文本缩放
示例：
input, textarea {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
}
Android 和其他浏览器要不要处理
Android Chrome、Firefox 移动版基本不触发该行为；Samsung Internet 个别版本有类似逻辑，但概率低。所以优先保 iOS，不必为兼容 Android 过度约束字号——比如硬塞 16px 导致小屏文字过大，反而影响体验。
真正容易被忽略的是：某些框架（如 Vue 的 v-model 动态绑定）或 CSS-in-JS 工具可能在运行时注入样式，覆盖你写的 font-size，建议用浏览器开发者工具的「Computed」面板直接查最终 font-size 值，别只信源码声明。
