safari 会将 font-size 小于 16px 的可编辑元素自动放大，必须确保 input、textarea、select、[contenteditable] 等元素的最终计算值 ≥16px 且搭配 -webkit-text-size-adjust: 100%，viewport 不应设置 maximum-scale 或 user-scalable。
为什么写了 font-size: 16px 还会放大
因为 Safari 不看你的 CSS 声明，只认最终计算出的 font-size 像素值。哪怕你写了 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
查「Computed」面板里的 font-size 值，才是唯一可信依据。
哪些元素必须统一设置 font-size: 16px !important
不能只写 input, textarea —— iOS 会检查所有能唤起键盘的节点，漏一个就可能放大。
-
input、textarea、select - 带
contenteditable属性的任意元素（比如div[contenteditable]） - 富文本编辑器容器（Tiptap、Quill 的根节点）
- Vue/React 封装的输入组件（如
<input>内部若用contenteditable，也得覆盖）
推荐兜底写法：
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% 怎么写才生效
这个属性不是万能开关，它只在 font-size ≥ 16px 的前提下起作用，且必须和字号声明写在同一选择器里。
- 写在
body上无效：会把正文小字也锁死，影响可读性 - 单独写
-webkit-text-size-adjust: 100%不起作用，Safari 会忽略 - 必须搭配显式
font-size，例如：input, textarea {<br> font-size: 16px !important;<br> -webkit-text-size-adjust: 100%;<br>} - 不要用
none：iOS 10+ 已废弃，部分版本反而失效
viewport meta 标签怎么配才不翻车
maximum-scale=1.0 单独用基本没用，iOS 16+ 已部分忽略；而 user-scalable=no 会彻底锁死双指缩放，损害可访问性。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是底线，必须存在且放在最顶部 - 删掉
minimum-scale、maximum-scale、user-scalable—— 它们对聚焦放大无实质约束，还容易引发兼容问题 - 如果必须动态控缩放（比如某些 Cordova 场景），要用 JS 在
focusin时临时改content，focusout后 300ms 恢复原始值 -
shrink-to-fit=yes已废弃，现代 iOS 不识别，别写
真正起效的永远是那个被 Safari 渲染引擎硬编码检查的数字：16。它不讲道理，也不看上下文，只认 computed 值是否 ≥16px —— 所有绕开这点的方案，迟早会在真机上露出破绽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
