iOS Safari 禁用缩放需同时满足 width=device-width、initial-scale=1.0、maximum-scale=1.0、minimum-scale=1.0 和 user-scalable=no，缺一不可；动态写入或存在可聚焦元素会导致失效。
为什么 user-scalable=no 在 iOS 上经常失效
不是因为你写错了，而是 iOS Safari 对这个属性的处理有明确限制：从 iOS 10 开始，只要页面存在 input、textarea 或任何可聚焦元素，用户双指缩放仍会被允许，user-scalable=no 实际被忽略。
常见错误现象：viewport 里写了 user-scalable=no，但真机上依然能缩放；或者缩放后页面错位、字体模糊，再刷新也不恢复。
- 只禁用双指缩放不够，iOS 还会响应「三指双击」等辅助操作，需配合
maximum-scale=1.0和minimum-scale=1.0 - 必须确保
width=device-width存在，否则 Safari 可能回退到桌面视口逻辑，让缩放规则整体失效 - 不要用 JavaScript 动态写入
meta[name=viewport]—— iOS 只在首次解析时读取，后续修改无效
正确的 viewport 写法和生效前提
移动端固定缩放真正起效，靠的是组合约束，而非单个属性。iOS 要求所有条件同时满足，缺一不可。
推荐写法（直接写在 <head> 中，不可延迟注入）：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-
initial-scale=1.0必须显式声明，不能省略；否则某些 Android WebView 会默认用 1.5 或其他值 -
maximum-scale和minimum-scale必须严格等于1.0（不能是1或"1"字符串），iOS 对浮点精度敏感 - 如果页面用了
transform: scale()或强制设置了font-size基于vw，缩放禁用后可能引发布局挤压，要提前测试文字可读性
禁用缩放后，表单输入框无法聚焦怎么办
这是最常被忽略的副作用：iOS 在 user-scalable=no 下，为保障可访问性，会悄悄放宽对 input 的缩放限制 —— 导致你刚禁掉，用户点输入框又弹出放大镜。
解决思路不是强行阻止，而是让缩放行为“不破坏体验”：
- 给所有
input、textarea加style="-webkit-text-size-adjust: 100%;"，防止 Safari 自动放大文本 - 避免在
input上设置过小的font-size（如12px），iOS 会触发强制放大；建议不低于16px - 不用
zoom或transform: scale()做响应式适配，它们与 viewport 缩放控制冲突，容易引发重排抖动
还有哪些地方会悄悄绕过 viewport 设置
即使 meta 标签完全正确，以下情况仍可能导致缩放“复活”：
- 使用了第三方 UI 库（如某些 Vue 组件库）在 mounted 钩子中动态修改
document.documentElement.style.fontSize，间接影响视口计算 - 页面加载了广告 SDK 或统计脚本，它们可能注入自己的
viewportmeta 标签，覆盖原有设置 - 在微信内置浏览器中，部分版本会忽略
user-scalable=no，必须额外加viewport-fit=cover并配合safe-area-inset处理
真正稳定的做法，是把 viewport 当作「声明式约束」，而不是「强制锁死」—— 它管得住初始渲染，但管不住所有运行时干预。留一点余量，比硬扛所有边缘 case 更可靠。
