唯一稳定解法是让所有可聚焦元素的最终渲染font-size≥16px并配合正确viewport meta标签;iOS Safari聚焦时只检测Computed值,小于16px(含浮点误差)必触发缩放,且-webkit-text-size-adjust:none已废弃,必须用100%并同级声明。

唯一稳定解法是让所有可聚焦元素的最终渲染 font-size ≥ 16px,并配合正确声明的 viewport meta 标签——其他纯 CSS 尝试(比如只加 -webkit-text-size-adjust: none)在 iOS 16+ 上基本失效。
为什么 font-size: 16px 是硬门槛,而不是“差不多就行”
iOS Safari 在 input、textarea、select 或带 contenteditable 的元素聚焦时,不看你写的 CSS 值,只读取「Computed」面板里最终渲染出的像素值。只要小于 16px(哪怕 15.99px),就会触发辅助缩放。
- 常见掉坑场景:
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: 16px !important
iOS 会检查所有能唤起键盘的元素,漏一个都可能放大:
立即学习“前端免费学习笔记(深入)”;
-
input(含type="text"、"search"、"email"、"tel"等) textarea-
select(原生下拉框) - 所有带
contenteditable属性的容器(如div[contenteditable]、article[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 单独写也不行——真正起效的是二者共存,且 width=device-width 必须存在:
- ✅ 正确:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no"> - ❌ 错误:
content="width=device-width, user-scalable=no"(缺maximum-scale) - ❌ 错误:
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"(混入冗余参数,增加不可控变量) - 该标签必须在
中,且不能被 JS 动态插入(部分 iOS 版本不识别)
真正容易被忽略的是:所有这些 CSS 修复都建立在 meta 标签生效的前提下。如果它写错或缺失,再调 font-size 和 box-sizing 都只是白忙——Safari 根本不给你“不放大”的机会。


















