纯css无法屏蔽双击缩放，必须用配合touch-action: manipulation及js拦截实现约束。
纯 CSS 无法屏蔽双击缩放——user-scalable=no 是 <meta name="viewport"> 的属性，写在 CSS 里（比如 body { user-scalable: no; }）完全无效。
viewport 必须写全且静态放在 最前
双击放大是否被约束，取决于浏览器解析 HTML 头部时锁定的视口策略。JS 动态插入或晚于其他资源的 <meta> 都会被忽略。
-
width=device-width是前提，缺了它，maximum-scale等参数可能被无视 -
initial-scale=1.0必须显式声明，否则 iOS 首次加载可能缩放到文本宽度 -
minimum-scale=1.0, maximum-scale=1.0是当前最广泛被尊重的组合；单写user-scalable=no在 iOS 10.3+ 和多数安卓浏览器中已被静默忽略 - 不要加
shrink-to-fit=yes（已废弃）或user-scalable=0（非标准值，行为不一致）
正确写法示例：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
按钮等可点击元素必须加 touch-action: manipulation
双击放大常由按钮、输入框等可交互元素触发，仅靠 viewport 不够——iOS Safari 对这类元素的双击仍走原生路径。
- 给所有按钮、提交控件加
touch-action: manipulation，例如：button, .btn, [type="submit"] { touch-action: manipulation; } - 不要写
* { touch-action: manipulation; }，否则轮播图滑动、图片双击查看等功能全部瘫痪 - 父容器不能设
touch-action: none，否则子元素的manipulation会被覆盖 - IE/Edge 需补
-ms-touch-action: manipulation
JS 拦截 touchstart 和 touchend 是唯一兜底手段
viewport 和 CSS 只能约束缩放范围，但无法阻止用户发起双指或快速双击。运行时拦截是目前最实操的防线。
- 双指缩放本质是
touchstart时event.touches.length > 1，需监听document.documentElement并调用event.preventDefault() - 双击放大本质是两次
touchend间隔 ≤ 300ms，需缓存上一次时间戳，第二次到来时拦截 - 必须传
{ passive: false }，否则 Chrome/Safari/Edge 会静默忽略preventDefault() - 别监听
dblclick：iOS Safari 根本不触发该事件，纯属无效
关键代码片段：document.documentElement.addEventListener("touchstart", function(event) { if (event.touches.length > 1) event.preventDefault(); }, { passive: false });
真正难的不是写对这几行代码，而是接受「双击缩放不可彻底禁用」这个事实：系统级字体缩放（如 iOS 辅助功能里的「更大字体」）永远有效，且不该被覆盖；text-size-adjust: 100% 才是防止布局抖动的核心防线，它必须作为全局规则写在最外层 CSS 中，且不能被第三方样式覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
