根本原因是iOS系统在input等元素聚焦时检测到font-size＜16px触发辅助缩放，真正有效解法是统一设为≥16px，如input,textarea,select,[contenteditable]{font-size:16px!important}。
iOS Safari 在 input、textarea 或 contenteditable 元素获得焦点时自动放大页面，根本原因是系统认为字体过小（低于 16px）影响可读性，于是触发“辅助缩放”行为。只靠禁用缩放或 JS 阻止手势，治标不治本；真正稳定有效的解法是让浏览器“觉得没必要放大”——也就是确保所有可聚焦元素的 font-size ≥ 16px。
为什么必须设成 16px？不是 15px 或 17px
iOS 的缩放触发阈值是硬编码的：只要计算后的渲染字号 小于 16 CSS 像素，就会强制放大视口。这个判断发生在 focus 时刻，且不看父级继承、只看该元素自身的最终 computed font-size。15.9px 也不行，16px 是临界整数。
-
font-size: 16px是最低安全值，16.01px也有效，但没必要——16px 已足够清晰且兼容所有 iOS 版本 - 如果用了
rem或em，要确保根字体或上下文最终解析为 ≥16px，比如html { font-size: 16px; }+input { font-size: 1rem; } - 加
!important很常见，因为第三方 UI 库或 reset.css 可能覆盖了你的基础样式
哪些元素必须统一设置 font-size
只写 input, textarea 不够。iOS 同样会为以下元素触发放大：
-
select（下拉框） - 带
contenteditable="true"的div、span、article等 - 自定义富文本编辑器容器（如 Quill、Tiptap 的编辑区）
- 某些框架封装的输入组件（如 Vue 的
v-model绑定的div[contenteditable]）
推荐一次性兜底：
立即学习“前端免费学习笔记（深入）”；
input, textarea, select, [contenteditable] {
font-size: 16px !important;
}
viewport 设置只是辅助，不能替代 font-size
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no"> 能防止用户双指缩放，但它无法阻止 iOS 自动聚焦放大。实测中，即使关了 user-scalable，只要字体
- 必须搭配
font-size: 16px使用，否则无效 -
initial-scale=1和minimum-scale=1属于冗余项，可省略 - 不要加
shrink-to-fit=yes（已废弃），现代 iOS 不识别
容易被忽略的坑：动态内容与框架组件
静态 HTML 加个 CSS 就完事？现实更复杂：
- Vue/React 中通过
v-html或dangerouslySetInnerHTML插入的富文本，其内部contenteditable元素不受全局 CSS 影响，需额外加 scoped 或 deep 选择器（如 Vue 的:deep([contenteditable])） - 使用了字体加载（
@font-face）时，若字体未就绪，浏览器可能按 fallback 字体（如serif）计算字号，导致短暂闪动放大——建议用font-display: swap或预设 fallback 字体大小 - 某些 UI 组件库（如 Ant Design Mobile）默认设了
font-size: 14px，必须用更高优先级样式覆盖
最稳妥的做法是把字体声明写在全局样式最顶部，并用 !important 锁死，别指望局部作用域或 BEM 命名能绕过 iOS 的底层判断。
