user-scalable=no必须写在<meta name="viewport">中，纯CSS无法控制缩放；正确写法需包含width=device-width、initial-scale=1.0、minimum-scale=1.0和maximum-scale=1.0，并配合JS拦截touchstart与gesturestart事件，且监听必须设passive: false。
user-scalable=no 不能靠纯 CSS 实现，它必须写在 <meta name="viewport"> 标签里；CSS 层面对双击缩放没有控制权，所有试图用 touch-action 或 transform 禁用它的做法都会失效。
为什么touch-action: none或pointer-events: none拦不住双击缩放
这两个属性作用对象完全不同：touch-action: none 只阻止触摸事件分发（比如禁掉滑动），但浏览器底层的双指手势识别照常运行；pointer-events: none 会让整个元素失焦，连输入框都无法聚焦，更不是缩放控制方案。双击缩放是 UA（用户代理）在视口初始化阶段就锁定的行为，CSS 渲染层根本插不上手。
<meta name="viewport"> 的正确写法与参数取舍
必须静态写在 <head> 最早位置，JS 动态插入完全无效。关键参数不是“要不要禁”，而是“怎么设才被现代浏览器尊重”：
-
width=device-width是前提，否则其他 scale 参数可能被忽略 -
initial-scale=1.0明确初始比例，避免 iOS 自动缩放到文本宽度 -
minimum-scale=1.0和maximum-scale=1.0比user-scalable=no更可靠——iOS Safari 10.3+ 会静默忽略后者，但前者仍被广泛支持 - 不要加
minimum-scale=1.0单独使用，横屏时可能因 viewport 宽度变大导致内容被裁切
推荐组合：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
立即学习“前端免费学习笔记（深入）”；
必须配合 JS 拦截多点触控和 gesturestart
仅靠 <meta> 在真机上大概率失效，尤其当页面内容高度超出视口时，iOS 会强制启用双指缩放查看溢出区域。此时必须运行时拦截：
- 监听
document.documentElement上的touchstart，检测event.touches.length > 1，立即event.preventDefault() - 监听
gesturestart（iOS 关键事件，不经过 touch 流），同样event.preventDefault() - 两个监听都必须传
{ passive: false }，否则 Chrome / Safari / Edge 会静默忽略preventDefault()
注意：iOS 13.4+ 和 Safari 15.4+ 已强制允许长按链接/输入框触发临时放大镜，这是无障碍策略，无法绕过。
真正难的不是写对代码，而是判断该不该禁——user-scalable=no 违反 WCAG 2.1，且约 37% 的 iOS 用户启用了系统级“更大字体”，硬禁会导致文字被裁切或不可读。业务强交互场景（如游戏、表单页）才考虑组合防御，普通页面优先用 text-size-adjust: 100% 隔离缩放影响，而不是消灭缩放本身。
