先聊一个让许多前端开发者感到头疼的问题：同一输入框，在安卓上表现正常，但一在 iPhone 上聚焦，页面就会自动放大。问题的根源并不在于 CSS 写错了，而是 iOS Safari 特有的底层渲染机制所致。
为什么 iOS 会自动放大页面？
首先要明确，iOS Safari 的该行为并非 bug，而是一项有意的可访问性策略。核心逻辑非常简单：当 input 或 textarea 的最终计算 font-size 小于 16px 时，Safari 会强制将视口临时缩放为 1.5–2 倍，以此确保小屏上的文字仍然可读。
关键点在于：Safari 不关心你的 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 值，远比猜测配置可靠得多——这恐怕是解决此问题最直接、最不容易出错的方法。
