移动端输入框聚焦时页面为什么会被放大_通过CSS设置font-size不小于16px解决

iOS因Webkit内核的Font Boosting机制自动放大字体，且会根据容器宽度动态调整font-size渲染大小，导致与安卓显示不一致。

为什么 iOS 会因 font-size

iOS Safari 的这个行为不是 bug，是明确的可访问性策略：当 input 或 textarea 的最终计算 font-size 小于 16px 时，浏览器会强制将视口临时缩放到约 1.5–2 倍，确保文字在小屏上可读。它不看你的 CSS 是否写了 font-size: 14px，而是看**渲染后的真实字号**——包括 rem 换算、父级继承、em 累积、甚至 zoom 或 transform 影响。

如何准确检查并确保 font-size ≥ 16px

光写 font-size: 16px 不够，必须验证最终生效值：

• 用 Safari 开发者工具（真机连接或模拟器）选中输入框，查看 Computed 面板里的 font-size 值，确认是 ≥ 16px 的绝对像素值
• 若用 rem，检查根元素 :root 的 font-size 是否被动态修改过（比如某些 UI 库在移动端设为 10px）
• 避免父容器设置 font-size: 0.875rem 叠加后导致子 input 实际只有 14px
• 对 textarea 单独检查，它常被忽略，但同样触发放大

font-size ≥ 16px 为什么比 viewport 控制更可靠

maximum-scale=1.0 在 iOS 16+ 已被 Safari 部分忽略，尤其在聚焦瞬间；而 font-size 触发机制是底层渲染逻辑，不受版本降级影响：

• 它不依赖 JS 监听事件，无竞态风险（比如 focusin 比 meta 修改慢几毫秒）
• 不干扰用户后续双指缩放需求（user-scalable=no 会彻底锁死，影响可访问性）
• 无需维护原始 viewport 内容字符串，避免失焦后恢复失败导致整站缩放异常
• 对安卓 WebView 同样有效，且无兼容性差异

兜底方案：-webkit-text-size-adjust: 100%

当无法统一调整所有输入框字号（比如受第三方组件限制），可用这个 CSS 属性抑制浏览器自动调整：

立即学习“前端免费学习笔记（深入）”；

input,textarea {  -webkit-text-size-adjust: 100%;}

注意：-webkit-text-size-adjust 仅作用于文本类输入框，且必须配合 font-size 显式声明才稳定生效；单独使用可能被 Safari 忽略。真正起效的组合是：

• font-size: 16px（或等效计算值）
• -webkit-text-size-adjust: 100%
• width=device-width 在 viewport 中存在（缺失会导致整个 viewport 解析失效）

最易被忽略的是字号的「继承链」和「计算结果」，而不是写了多少行 CSS。真机调试时直接看 Computed 值，比猜配置靠谱得多。