ios safari强制缩放是因font-size
手机端页面被强制放大、输入框点击后界面“忽大忽小”，不是 Bootstrap 的 bug，而是 iOS Safari 的默认行为在起作用——它检测到 font-size 或输入控件宽度
<h3>为什么加了 <code>viewport 还是缩放？
常见错误是只写了 <meta name="viewport" content="width=device-width, initial-scale=1">，却漏掉了 user-scalable=0 或 maximum-scale=1.0。iOS Safari 在检测到小字号或窄输入框时，仍会绕过 initial-scale 触发临时缩放。必须显式封死上限：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">- 注意：
user-scalable=no在 iOS 10+ 中已被部分限制（Safari 可能忽略），但maximum-scale=1.0仍是生效最稳的组合 - 该标签必须放在
最顶部，且不能被 JS 动态插入（否则可能错过首次渲染）
input 和 select 元素触发放大的真实原因
不是“页面缩放”，而是 Safari 对单个表单控件的热区补偿。只要满足任一条件，就会触发：
font-size （即使父级是 1rem，若根字号被压缩到 12px，实际就是 12px）width （比如 <code>.form-control在小屏下被栅格挤压）- 未设
min-width，且容器用flex或grid压缩了控件宽度
实操建议：给所有表单控件加 min-width: 44px（iOS 底线），并确保 font-size 在小屏下不低于 1rem（推荐用 clamp(1rem, 1.5vw, 1.25rem) 防极端压缩）。
Bootstrap 模态框里输入框放大更严重？
因为 Modal 的 .modal-dialog 默认有 max-width，在小屏下导致内部 .form-control 实际宽度远小于 44px；再加上 Modal 渲染时机晚于首屏，viewport 规则可能未及时生效。
- 给模态框内输入框加类：
class="form-control w-100 min-w-[44px]"（Tailwind 写法）或自定义 CSS：min-width: 44px; width: 100%; - 避免在 Modal 中嵌套
.col-栅格——它们的padding和max-width会进一步压缩控件可用空间 - 确认
bootstrap.bundle.min.js已加载，Modal 的show事件触发后，再检查输入框尺寸（DevTools → Computed → width/min-width）
真正要检查的三个地方，比写 CSS 更优先
很多问题根本不在样式层，而在基础配置和结构上：
-
根元素是否被媒体查询意外设置了font-size: 12px？查 DevTools 的 Computed 面板，看font-size实际值 - 父容器是否用了
transform: scale()或zoom？这两个属性会干扰 viewport 缩放判定，iOS 下表现尤其异常 - 有没有第三方库（如某些轮播插件、弹窗组件）动态修改了
document.documentElement.style.fontSize或注入了冲突的viewport标签？
事情说清了就结束。缩放问题从来不是“关掉就行”，而是让字体、宽度、viewport 三者对齐 iOS 的可访问性规则——少一个，都还会跳。
