iOS Safari强制缩放是因font-size<16px或输入框宽<44px触发的可访问性行为，需通过viewport设maximum-scale=1.0、表单控件加min-width:44px及确保字号≥16px三者协同解决。
手机端页面被强制放大、输入框点击后界面“忽大忽小”，不是 Bootstrap 的 bug，而是 iOS Safari 的默认行为在起作用——它检测到 font-size < 16px 或输入控件宽度 < 44px 时，会自动缩放整个视口以提升可读性与可触控性。解决的关键不是“禁用缩放”，而是让页面本身符合移动端可访问性基线。
为什么加了 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仍是生效最稳的组合 - 该标签必须放在
<head>最顶部，且不能被 JS 动态插入（否则可能错过首次渲染）
input 和 select 元素触发放大的真实原因
不是“页面缩放”，而是 Safari 对单个表单控件的热区补偿。只要满足任一条件，就会触发：
-
font-size < 16px（即使父级是 1rem，若根字号被压缩到 12px，实际就是 12px） -
width < 44px（比如.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 更优先
很多问题根本不在样式层，而在基础配置和结构上：
-
<html>根元素是否被媒体查询意外设置了font-size: 12px？查 DevTools 的 Computed 面板，看font-size实际值 - 父容器是否用了
transform: scale()或zoom？这两个属性会干扰 viewport 缩放判定，iOS 下表现尤其异常 - 有没有第三方库（如某些轮播插件、弹窗组件）动态修改了
document.documentElement.style.fontSize或注入了冲突的viewport标签？
事情说清了就结束。缩放问题从来不是“关掉就行”，而是让字体、宽度、viewport 三者对齐 iOS 的可访问性规则——少一个，都还会跳。
