双击缩放禁用不生效的主因是viewport meta缺失或参数错误；必须同时设置user-scalable=no和maximum-scale=1.0且minimum-scale=1.0，且meta需静态置于head中；touch-action: manipulation仅对指定元素生效，不能替代viewport。
双击缩放禁用不生效？先看viewport meta是否写对
多数情况不是CSS的问题，而是viewport meta缺失或参数冲突。移动端浏览器默认允许双击缩放，必须靠viewport显式关掉。
关键点：必须同时满足两个条件——user-scalable=no + maximum-scale=1.0（仅user-scalable=no在iOS Safari 10+已不够用）。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">- 注意：
minimum-scale和maximum-scale必须一致且为1.0，否则部分Android WebView仍可缩放 - 不要写
shrink-to-fit=yes（Safari私有属性，已废弃，且会干扰缩放控制） - 该meta必须放在
内，且不能被JavaScript动态插入（iOS Safari忽略动态添加的viewport）
touch-action: manipulation能替代viewport吗？
不能完全替代，但它是更现代、更细粒度的补充手段，尤其对按钮/卡片类交互区域有效。
touch-action: manipulation告诉浏览器：“这个区域只做点击/滑动，别响应双击缩放”。但它不作用于整个页面，只对加了该样式的元素生效。
- 适用场景：
<button></button>、<div class="card">等需要快速响应点击又怕误触缩放的区域 <li>写法：<code>button, .card { touch-action: manipulation; } - 兼容性：Chrome 36+、Firefox 52+、Safari 13.1+、Edge 12+；iOS Safari 13.4前需配合
-webkit-touch-callout: none防长按缩放 - 注意：如果父容器设置了
touch-action: none，子元素的manipulation会被继承覆盖 - 页面被嵌入
<iframe></iframe>中，且父页面未设置sandbox="allow-scripts allow-same-origin"——某些iOS WKWebView会忽略iframe内viewport - 使用了第三方UI库（如Ionic、Vant），它们可能在初始化时重写
viewportmeta，需检查其配置项（如Ionic的zoom选项） - 开发工具里开启了“Device Toolbar”并手动缩放，这属于开发者工具模拟行为，不影响真机
- iOS Safari在地址栏展开/收起时会临时重置缩放，属系统行为，无法禁用，但不会影响用户主动双击
- 辅助功能开启时的“放大镜”模式（iOS“显示与文字大小”里的“更大字体”+“缩放”开关）——这是系统级无障碍特性，网页无权禁用
- 强制横屏后旋转设备导致的布局重排，可能触发浏览器自动缩放补偿（此时应优先用
orientation媒体查询+固定宽高比容器缓解） - 微信内置浏览器（X5内核）部分版本会忽略
user-scalable=no，必须配合JS检测：document.documentElement.addEventListener('gesturestart', e => e.preventDefault())（仅作兜底，慎用，影响滚动性能）
为什么加了user-scalable=no还是能缩放？常见漏点
不是代码没写，而是被其他逻辑覆盖或触发了例外路径。
CSS禁用缩放的边界：哪些缩放它真管不了
touch-action和viewport都只能约束“用户主动触发”的缩放行为，对以下情况无效：
真正可靠的组合只有两个动作：正确声明viewport meta + 对高频交互区域加touch-action: manipulation。其它都是妥协方案。
