纯css无法真正禁用双指缩放——touch-action: none等属性不干预原生缩放，必须通过中静态声明的viewport meta标签控制，如，且width=device-width与initial-scale=1.0须同时存在。
纯CSS无法实现手势缩放锁定
不能靠任何 CSS 属性真正禁用双指缩放——touch-action: none、pointer-events: none 或 transform: scale() 都不干预原生缩放行为。浏览器在解析 <meta name="viewport"> 时就已锁定是否派发多点触摸事件，CSS 属于渲染层，此时早已失效。
必须用 viewport meta 标签控制缩放开关
真正起效的只有 <meta name="viewport">，且必须写在 最早位置（JS 动态插入无效）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
width=device-width和initial-scale=1.0必须同时存在，否则maximum-scale可能被忽略 -
user-scalable=no和maximum-scale=1.0是双保险：部分 Android 浏览器只认后者 - 不要加
minimum-scale=1.0，横屏时会因 viewport 宽度变大而裁切内容 - iOS 13.4+ 和 Safari 15.4+ 会弱化
user-scalable=no的强制性——长按输入框触发的放大镜无法拦截，这是无障碍策略，非 bug
touch-action 只能辅助降低误触概率
touch-action 不是缩放开关，而是手势意图声明。它影响的是“浏览器是否接管该区域的手势”，不是“是否允许缩放”：
-
touch-action: pan-x pan-y可大幅减少双击/捏合误触发，但无法阻止用户在页面其他区域（如空白处）缩放 -
touch-action: manipulation在 iOS 13.4+ 才完整支持，更早版本（如 iOS 12.5.7）直接忽略 - 父元素设了
touch-action: none，子元素写manipulation也无效——UI 框架根容器常踩此坑 - 若页面内容溢出视口（比如没设
html, body { height: 100vh; }），iOS Safari 会强制启用缩放查看溢出区，touch-action完全失效
想局部缩放又全局锁死？得用 JS + viewport 协同
如果业务需要像图片、图表这类可交互缩放，但又不想让整个页面抖动或错位，方案是：
- viewport 改为
user-scalable=yes，但保留maximum-scale=1.0防止过度放大 - 用
touchstart/touchmove手动监听双指距离变化，驱动目标元素的transform: scale() - 务必在两个事件回调里都调用
event.preventDefault()，且监听时传{ passive: false } - 计算缩放中心必须用两指中点：
transform-origin: ${midX}px ${midY}px，否则会偏移 - 注意：一旦 viewport 设了
user-scalable=no，iOS 就不再派发event.touches，你的 JS 缩放代码根本不会执行
touch-action 和 JS 拦截，只要 <meta> 缺失、动态插入、或参数矛盾，iOS Safari 就会回退到默认行为，缩放抖动和手势失控都会重现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
