移动端输入框聚焦页面放大？CSS font-size≥16px解决

先说一个让不少前端头疼的场景：同一个输入框，在安卓上显示得好好的，切到 iPhone 上一聚焦，页面就开始缩放。根源在哪？其实不在你的 CSS 写错了，而在于 iOS Safari 的一套底层渲染逻辑。

iOS Safari 为何在输入框聚焦时自动放大页面

首先得澄清，iOS Safari 的这个行为不是 bug，而是一个明确的可访问性策略。核心逻辑很简单：当 input 或 textarea 的最终计算 font-size 小于 16px 时，浏览器会强制将视口临时缩放到 1.5–2 倍，确保文字在小屏上依然可读。

关键点在于：它不看你的 CSS 是否写了 font-size: 14px，而是看渲染后的真实字号。这意味着——rem 换算、父级继承、em 累积、甚至 zoom 或 transform 的影响，都会导致最终结果超出你的预期。所以，光在 CSS 里硬写一个像素值，远远不够。

如何确保 font-size 实际计算值 ≥ 16px

既然问题出在"计算结果"而非"声明值"，那检查节点就必须落到浏览器开发者工具上了。具体来说，这几步不可省略：

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

font-size 方法比 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 值，远比猜配置靠谱得多——这恐怕是解决移动端输入框聚焦页面放大问题最直接、最不容易出错的方法。