移动端输入框聚焦时页面放大，根本原因是iOS Safari的自动可访问性行为被触发，它只检测输入框最终渲染的font-size是否小于16px，而非CSS写法本身。
移动端输入框聚焦时页面放大，不是 CSS 没写对，而是 Safari 的自动可访问性行为被触发了——它只看最终渲染字号是否
为什么 -webkit-text-size-adjust: 100% 单独加没用
这个属性不控制缩放，只阻止 Safari 对文本的内部字号重计算。如果 input 最终渲染的 font-size 是 14px（哪怕你写了 16px，但被 rem 换算或继承压低了），它照样放大。
- 必须和
font-size: 16px（或等效绝对值）一起用，且作用于input、textarea、select元素本身 - 不能只设在
body或全局html上，否则正文小字也变难读 - UI 库（如 Vant、Ant Design Mobile）常通过内联样式或高优先级 class 覆盖你的规则，得加
!important - Vue/React 项目里，
mounted阶段 JS 可能动态注入样式，源码写了不等于最终生效
如何确认 font-size 真的 ≥16px
别信 CSS 文件里的声明，要查「Computed」面板里 font-size 的最终数值。常见掉坑点：
- 根元素设了
html { font-size: 12px; }，再写1.333rem→ 实际 15.996px，四舍五入后 Safari 仍判为 - 父容器有
font-size: 0.875em，子input继承后直接跌破阈值 - 用了
clamp(14px, 4vw, 16px)，小屏下可能落到 14px 甚至更低 - 某些框架组件（如
font-size写进style属性，必须用更强制的选择器覆盖，例如input:not([type="hidden"]) !important
meta name="viewport" 必须完整且提前生效
缺一个参数，前面所有 CSS 都白搭。iOS Safari 在聚焦时会 fallback 到旧逻辑，绕过你的样式控制。
- 必须包含：
width=device-width（否则scale类参数失效）、initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0 -
user-scalable=no在 iOS 10.3+ 已被忽略，且损害可访问性，不推荐单独依赖 - 多个
meta name="viewport"标签时，只有第一个生效；Ionic、Cordova 插件或 JS 动态改content会直接覆盖你写的 - 最稳做法：把
meta放在最顶部，不通过 JS 注入，也不用或 SSR 动态生成
Android 和其他浏览器要不要同步处理
不用过度适配。Chrome for Android、Firefox Mobile 基本不触发该行为；Samsung Internet 极个别版本有类似逻辑，但概率极低。
- 优先保 iOS，别为了兼容 Android 把
font-size硬拉到 16px 导致小屏文字过大 - Android Chrome 有另一套启发式文本缩放机制（影响菜单、段落等非表单区域），可用
text-size-adjust: none局部禁用，但不要全站加 - 真机调试比模拟器可靠得多：Safari 远程调试（macOS + iPhone）、Chrome 远程调试（Android）才能看到真实
Computed值
最容易被忽略的是：所有这些设置都依赖「最终渲染值」，而它受继承链、单位换算、JS 动态样式、框架封装层层影响。盯着「Computed」面板查 font-size 和 text-size-adjust，比反复改 CSS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
