ios safari聚焦放大是硬编码可访问性逻辑，非bootstrap错误；必须同时满足viewport中maximum-scale=1.0且user-scalable=no、所有可聚焦元素（input/textarea/select/[contenteditable]）font-size≥16px并显式加!important，且需验证computed font-size恒≥16px。
为什么Bootstrap项目在iOS上输入框一聚焦就放大
不是Bootstrap写错了，是iOS Safari的硬编码逻辑：只要input、textarea、select或带contenteditable的元素最终渲染字号＜16px，它就强制放大整个视口。Bootstrap本身没设字号，但它的reset或默认样式常把font-size压到14px甚至更低，加上某些组件（如form-control）用rem单位继承根字号，很容易跌破临界值。
必须写的viewport meta标签怎么配才生效
只写user-scalable=no没用，iOS Safari会忽略。必须同时满足两个条件：
-
maximum-scale=1.0要显式写出，不能省略 -
user-scalable值必须是no（不是false、空字符串或0） - 标签必须放在
最顶部，不能被JS动态插入或覆盖 - 避免重复声明——多个
meta name="viewport"时，只有第一个生效
正确写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Bootstrap里哪些元素必须加font-size: 16px !important
不能只写input。iOS会检查所有可聚焦表单控件的实际渲染字号，包括：
-
input、textarea、select - 带
contenteditable="true"的容器（比如富文本编辑器） - Bootstrap封装的组件，如
.form-control、.custom-select、.btn（如果绑了contenteditable）
兜底写法：input, textarea, select, [contenteditable] { font-size: 16px !important; }。加!important是因为Bootstrap的CSS优先级高，普通规则容易被覆盖。
为什么用了clamp(14px, 4vw, 16px)还是放大
因为clamp()在小屏下可能算出＜16px的值。比如320px宽屏，4vw = 12.8px，直接触发放大。真正可靠的是确保**计算后结果恒≥16px**：
- 优先用
font-size: 16px，简单直接 - 若需响应式，改用
clamp(16px, 4vw, 18px)，下限锁死16px - 避免
em/rem间接压缩：比如html { font-size: 14px; }+input { font-size: 1rem; }→ 实际14px - 务必打开开发者工具「Computed」面板，查
font-size最终值——别信源码里写的那行CSS
真正容易被忽略的是：viewport meta写错一行，其他所有CSS修复都白忙。Safari根本不给你“不放大”的机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
