iOS Safari 在 input 或 textarea 获得焦点时自动放大页面，根本原因是其硬编码的可访问性逻辑：只要元素最终渲染的 font-size 小于 16px，就强制放大视口；需确保 computed font-size ≥16px，并配合 -webkit-text-size-adjust: 100% 和 viewport 正确配置。
iOS Safari 在 input 或 textarea 获得焦点时自动放大页面，根本不是 bug，而是它硬编码的可访问性逻辑：只要这些元素「最终渲染的 font-size 小于 16px」，就强制放大整个视口。只写 font-size: 16px 不一定管用，关键看计算结果是否真 ≥16px。
为什么写了 font-size: 16px 还会放大
常见错误是只信 CSS 声明，不查最终渲染值。Safari 看的是 computed font-size，不是你写的那行代码：
-
html { font-size: 14px }+input { font-size: 1.143rem }→ 实际 ≈ 16px，但浮点误差可能算成 15.99px，仍触发放大 - 父级设了
font-size: 0.875em，子input没重置，继承后掉到 14px 以下 - 用了
clamp(14px, 4vw, 18px)，小屏下4vw在 320px 宽度上仅 12.8px - UI 库（如 Vant、Ant Design Mobile）动态注入内联样式，把你写的
font-size覆盖了
必须同时作用的 HTML 元素和伪类
不能只写 input —— iOS 会检查所有能唤起键盘的元素，且聚焦态不能意外重置字号：
- 显式覆盖：
input、textarea、select、带contenteditable属性的容器（如富文本编辑器根节点） - 必须加
:focus伪类规则，否则某些框架在 focus 时动态加 class 可能导致字号回落 - 推荐写法：
input, textarea, select, [contenteditable] {<br> font-size: 16px !important;<br>}<br>input:focus, textarea:focus, select:focus, [contenteditable]:focus {<br> font-size: 16px !important;<br>}
-webkit-text-size-adjust: 100% 的真实作用和写法
这个属性不是“禁用缩放”，而是阻止 Safari 对文本做二次字号重计算。它只有在 font-size ≥ 16px 的前提下才起效：
立即学习“前端免费学习笔记（深入）”；
- 别写在
body上——会导致正文小字也变难读 - 必须和
font-size: 16px同级写在表单元素上，例如：input, textarea {<br> font-size: 16px !important;<br> -webkit-text-size-adjust: 100%;<br>} - 不用
none：iOS 10+ 已废弃，部分版本反而失效 - 用
100%是最稳妥的，且不会影响可访问性
viewport meta 标签的必要参数和陷阱
user-scalable=no 单独写没用，iOS Safari 忽略它；真正起效的是 maximum-scale=1.0 和 minimum-scale=1.0 的组合：
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> - 不能动态插入 JS：必须在
<head>中静态存在，且早于所有 CSS 加载 - 删掉
shrink-to-fit=yes：已废弃，Safari 不识别，还可能干扰渲染 -
initial-scale=1.0不是冗余——部分 Android WebView 依赖它 fallback
最容易被忽略的点：浏览器开发者工具里直接查「Computed」面板中的 font-size 值，而不是翻 CSS 文件。哪怕你写了 16px，只要 computed 结果是 15.999px，放大照旧发生。
