禁止缩放必须从viewport meta标签开始，媒体查询仅响应尺寸变化而不能阻止缩放；minimum-scale=1.0和maximum-scale=1.0最可靠，user-scalable=no已不可依赖；touch-action非全局开关，JS拦截需passive: false且处理双击与溢出问题。
媒体查询本身不能禁止缩放——它只响应屏幕尺寸变化，不控制视口行为。真正起作用的是 viewport meta 标签，媒体查询只是配合它做条件样式。
viewport meta 是唯一有效的起点
所有“禁止缩放”的尝试都必须从 HTML 的 <meta name="viewport"> 开始，媒体查询无法替代它：
-
width=device-width必须存在，否则scale类参数（如maximum-scale）可能被浏览器忽略 -
initial-scale=1.0要显式写上，否则某些 Android 机型首次加载会意外缩放 -
minimum-scale=1.0, maximum-scale=1.0是目前最可靠组合，比user-scalable=no更被广泛尊重 -
user-scalable=no在 iOS 10.3+ 和新版 Chrome 中已被静默绕过，仅作兼容性补全，不可依赖
为什么加了媒体查询还是能缩放？
常见误解是“用 @media (max-width: 768px) 包一层 viewport 就能生效”，但这是无效的：
-
<meta>标签必须静态写在<head>最早位置，JS 动态插入或媒体查询内嵌入都无效 - 浏览器解析完
<head>就已锁定视口策略，后续任何 CSS 或 JS 都无法修改该初始设定 - 媒体查询只能在缩放发生后响应新尺寸，不能阻止缩放动作本身
touch-action 只能局部防误触，不是全局开关
touch-action: manipulation 不是缩放禁令，而是手势意图声明：
立即学习“前端免费学习笔记（深入）”；
- 它只对加了该样式的元素生效，比如
button或卡片容器，写在body上无效 - 空白区域、文本段落、
<div>等未设样式的部分仍可双指缩放 - 若父级设了
touch-action: none，子元素的manipulation会被继承覆盖 - iOS Safari 13.4 前还需配
-webkit-touch-callout: none防长按触发缩放
真要拦住缩放，得靠 JS + passive: false
当 viewport 和 CSS 都失效时，唯一实操路径是运行时拦截手势：
- 监听
document.documentElement的touchstart，检测event.touches.length > 1 - 必须传
{ passive: false }，否则event.preventDefault()在 Chrome/Safari/Edge 中会被静默忽略 - 双击放大需额外拦截
touchend：缓存时间戳，两次间隔 ≤ 300ms 时阻止第二次 - 注意别在拦截后又触发滚动，否则 iOS 可能卡死；优先用
touch-action: pan-x pan-y减少误触概率
最易被忽略的一点：如果页面内容高度超出视口（document.documentElement.scrollHeight > window.innerHeight），iOS 会强制启用双指缩放以查看溢出区域——这时无论 viewport、CSS 还是 JS 拦截，都救不了布局错乱。
