iPhone点击input或textarea页面放大是iOS Safari主动辅助行为，须同时满足viewport中maximum-scale=1.0且user-scalable=no，以及所有表单控件font-size≥16px，缺一不可。
iPhone 上点击 input 或 textarea 后页面整体放大，不是 Bug，是 iOS Safari 的主动辅助行为；靠改 Bootstrap 类或加 CSS 无法根治，必须从 viewport 配置和字体尺寸两个层面同时卡死。
viewport meta 必须写对且唯一
只写 user-scalable=no 不够，Safari 会忽略。它要求两个条件同时满足：
-
maximum-scale=1.0必须显式声明，不能省略或写成maximun-scale=1（拼错就失效） -
user-scalable值只能是no，写成false、0或空字符串都无效 - 该
<meta name="viewport">标签必须出现在<head>最顶部，且不能被 JS 动态覆盖（比如某些 Cordova 插件或 UI 框架会在加载后重写 content） - 页面中不能存在多个
name="viewport"标签——只有第一个生效，后面全被无视
正确写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
input 字体大小必须 ≥16px
iOS 的触发阈值是 16px，不是 15px 或 14px。哪怕只小 0.1px（比如 font-size: 0.99rem 在某些根字号下算出来是 15.84px），也可能触发缩放。
- Bootstrap 的
form-control-sm默认font-size: 0.875rem，在根字号为 16px 时刚好是 14px —— 必须覆盖 - 不要只改
input，textarea和select.form-select也要一并检查 - 用
em或rem时，确认html或body没有被 JS 动态修改过font-size - 快速验证：在 Safari 开发者工具里选中 input 元素，看 Computed 面板里最终生效的
font-size是否 ≥16px
避免窄容器触发“伪缩放”
即使字体达标，如果 input 实际内容区宽度太窄（比如父容器有 padding + width: 100%），Safari 仍可能判定“文字挤在一起”，强行放大视口来提升可读性。
- 别给
input父元素设padding同时又让input写width: 100%—— 改用box-sizing: border-box或直接用 Bootstrap 栅格（如.col-md-8）控制宽度 -
.input-group容器内若用了.input-group-text，确保其宽度不挤压input的可用空间；长标签文本容易导致右侧输入框被压缩 - 慎用
-webkit-text-size-adjust: none：iOS 10+ 已废弃，且会破坏可访问性，完全没必要
其他容易被忽略的干扰项
缩放问题常被误判为纯样式问题，但真实原因往往藏在框架或环境层：
- Bootstrap Modal 内的
input更容易出问题——因为 modal 渲染时可能延迟注入，导致初始 viewport 设置被绕过；建议把 viewport meta 放到 HTML 模板最顶，而非 JS 动态生成页 - 使用
form-control-lg时，虽然它把font-size提到了1.25rem（20px），但如果全局htmlfont-size 被设成10px，那实际还是 20px × 0.625 = 12.5px → 仍会缩放 - 某些 Vue/React 封装的表单组件会透传 class 失败，导致
form-control类没真正挂到input元素上，检查 DOM 真实结构比看模板更可靠
最稳的组合：viewport meta 正确 + 所有可聚焦表单控件的最终 font-size ≥16px + 父容器不制造窄内容区。三者缺一，缩放就可能回来——这不是 CSS 能修好的逻辑层行为。
