单纯靠meta viewport标签无法真正禁止移动端缩放，尤其是iOS 10+和新版安卓浏览器；需配合touch-action CSS声明与gesturestart/touchstart事件拦截JS兜底，且须确保页面无溢出内容以规避系统级可访问性强制缩放。
单纯靠 <meta name="viewport"> 标签无法真正禁止移动端缩放，尤其是 iOS 10+ 和新版安卓浏览器 —— 不是写法错，是系统级可访问性策略强制覆盖了它。
viewport meta 标签必须这样写，但仅起基础约束作用
它不能当“禁令”用，只能配合其他手段形成防线：
-
width=device-width和initial-scale=1.0必须同时存在，否则maximum-scale=1.0可能不生效 -
minimum-scale=1.0和maximum-scale=1.0比单写user-scalable=no更可靠，部分安卓机仍会响应这两个值 -
user-scalable=no或user-scalable=0效果等价，但在 iOS 10+ 中会被静默忽略（控制台无报错，但双指/双击仍可缩放） - 该标签必须静态写在
最早位置，JS 动态插入完全无效 —— 浏览器解析完就已锁定视口策略
正确示例：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
touch-action: pan-x pan-y 是最实用的 CSS 补充方案
它不禁止缩放本身，而是告诉浏览器：“这个区域只允许平移”，大幅降低误触缩放手势概率：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 全局加
* { touch-action: pan-x pan-y; }简单粗暴，但会禁用所有双击放大和旋转手势，可能影响表单输入框、地图等交互元素 - 更推荐局部加：轮播图容器加
style="touch-action: pan-x"，列表区域加touch-action: pan-y，既防缩放又保滚动 - IE/Edge 需补
-ms-touch-action: pan-x pan-y，Safari 和 Chrome 原生支持良好 - 注意：若页面内容高度超出视口（比如未设
html, body { height: 100vh; }），iOS Safari 会自动启用双指缩放查看溢出区，此时touch-action也救不了 —— 得先解决内容溢出问题
gesturestart + touchstart 多点拦截是目前最实操的 JS 兜底方案
当 viewport 和 CSS 都失效时，只能靠 JS 拦截手势行为。重点不是“阻止缩放”，而是“不让缩放触发”：
- 双指缩放本质是
touchstart时event.touches.length > 1，加event.preventDefault()可阻断 - 双击放大本质是两次
touchend间隔 ≤ 300ms，需缓存时间戳并拦截第二次 - 必须传
{ passive: false }，否则 Chrome/Edge/Safari 会静默忽略preventDefault() - 监听目标必须是
document.documentElement，避免被 iframe 或子容器干扰
关键代码片段：
document.documentElement.addEventListener("touchstart", function(event) {
if (event.touches.length > 1) event.preventDefault();
}, { passive: false });
<p>let lastTouchEnd = 0;
document.documentElement.addEventListener("touchend", function(event) {
const now = Date.now();
if (now - lastTouchEnd <= 300) event.preventDefault();
lastTouchEnd = now;
}, { passive: false });为什么 iOS 10+ 会无视 viewport 缩放限制？
这不是 bug，是 Apple 主动设计的可访问性策略：只要 document.documentElement.scrollHeight > window.innerHeight（即页面有滚动内容），就允许用户双指缩放以查看溢出区域 —— 这个逻辑无法绕过，只能接受。
所以真正要做的，不是“彻底禁止缩放”，而是：
- 确保核心交互区域（如按钮、输入框、轮播）不受缩放干扰
- 用
touch-action明确声明手势意图 - 用 JS 拦截明显非意图操作（多点、快速双击）
- 接受辅助功能缩放（如系统级“更大字体”或“缩放手势”）不可控的事实
