唯一稳定解法是为input、textarea、select和[contenteditable]显式设置font-size: 16px !important并配合:focus伪类，且确保最终渲染值≥16px；-webkit-text-size-adjust: 100%须与font-size同级声明，viewport必须含width=device-width且不可动态注入。
直接给 input、textarea、select 和 [contenteditable] 设置 font-size: 16px 并配合正确 viewport，是唯一稳定解法。其他写法——比如只加 -webkit-text-size-adjust: none 或单靠 user-scalable=no——在 iOS 16+ 上基本失效。
为什么写了 font-size: 16px 还会放大
Safari 不看你写的 CSS 声明，只看最终计算出的 font-size 像素值是否 ≥16px。常见掉坑场景：
-
html { font-size: 14px }+input { font-size: 1.143rem }→ 实际 ≈ 15.99px（浮点误差触发放大） - 父容器设了
font-size: 0.875em，子input没重置 → 继承后变成 14px - 用了
clamp(14px, 4vw, 18px)，在 320px 宽度下4vw = 12.8px - Vant/Ant Design Mobile 等 UI 库动态注入内联样式，把你写的
font-size覆盖了
真机调试时必须打开 Safari 开发者工具，选中输入框，直接看「Computed」面板里的 font-size 值——不是源码，是渲染结果。
哪些元素必须统一设置 font-size
iOS 会检查所有能唤起键盘的元素，漏一个都可能放大：
-
input、textarea、select（下拉框） - 带
contenteditable属性的容器（如富文本编辑器根节点） - 某些框架封装的输入组件（比如 Vue 的
v-model绑定的div[contenteditable]）
推荐兜底写法（必须含 :focus 伪类）：
input, textarea, select, [contenteditable] {
font-size: 16px !important;
}
input:focus, textarea:focus, select:focus, [contenteditable]:focus {
font-size: 16px !important;
}
不加 :focus 会导致某些框架在聚焦时动态加 class，把字号又拉回去了。
-webkit-text-size-adjust: 100% 怎么写才生效
这个属性不是“禁用缩放”，而是告诉 Safari：别对文本做二次字号重计算。但它只在 font-size ≥ 16px 时才起效，且必须和 font-size 同级写在目标元素上：
- ❌ 错：写在
body或html上 → 正文小字也变难读 - ✅ 对：
input, textarea { font-size: 16px !important; -webkit-text-size-adjust: 100%; } - ❌ 别用
none：iOS 10+ 已废弃，部分版本反而失效；100%是唯一稳妥值
viewport meta 标签必须怎么配
user-scalable=no 单独写无效，iOS Safari 会忽略它。必须搭配 maximum-scale=1.0 才可能起效，但仍有竞态风险：
- 正确写法：
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no"> -
user-scalable必须是no（不能是false、空字符串或0） - 该标签必须放在
最顶部，且不能被 JS 动态插入（部分 iOS 版本不识别） - 多个
meta name="viewport"标签时，只有第一个生效；某些 UI 框架（如 Ionic）会动态重写它
真正容易被忽略的是：所有这些 CSS 修复都建立在 meta 标签生效的前提下。如果它写错或被覆盖，再调 font-size 和 box-sizing 都只是白忙——Safari 根本不给你“不放大”的机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
