真正起效的是 minimum-scale=1.0 和 maximum-scale=1.0 的组合约束，但必须搭配 width=device-width 和 initial-scale=1.0 才能生效；常见错误包括漏 initial-scale、JS 动态插入 viewport、内容溢出导致 iOS 自动启用缩放。
viewport 必须写全且静态放在 head 最前
只靠 user-scalable=no 在 iOS 10.3+ 和主流安卓浏览器中已被静默忽略，不是你写错了，是浏览器主动拒收。真正起效的是 minimum-scale=1.0 和 maximum-scale=1.0 的组合约束，但必须搭配 width=device-width 和 initial-scale=1.0 才能生效。
常见错误包括：
- 漏掉
initial-scale=1.0：部分旧 WebView（如 UC）会直接跳过maximum-scale约束 - JS 动态插入
<meta name="viewport">：浏览器解析完<head>就已锁定视口策略，后续补写无效 - 页面内容高度溢出（
document.documentElement.scrollHeight > window.innerHeight）：iOS Safari 会自动启用双指缩放以查看溢出区域，此时所有 viewport 设置都失效
正确写法（必须静态置于 <head> 最开头）：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
按钮和可点击元素加 touch-action: manipulation
双击放大常由按钮触发，仅靠 viewport 不够——iOS Safari 对按钮的双击仍走原生路径。关键是在具体可点击元素上启用手势简化，而非全局设置。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 只对实际需要响应点击的元素设
touch-action: manipulation，例如：button, .btn, [type="submit"], [data-role="toggle"] - 不要写
* { touch-action: manipulation; }：轮播图滑动、图片双击查看等功能会全部瘫痪 - 父容器不能设
touch-action: none：子元素的manipulation会被覆盖，导致失效 - 该声明不作用于
body或html：iOS Safari 对 body 的双击仍会触发页面级缩放
用 CSS 禁用长按菜单：-webkit-touch-callout 与 user-select 配合
长按弹出系统菜单（“复制”“搜索”“保存图像”）是跨平台差异最大的问题之一。iOS 和安卓处理逻辑不同，必须双管齐下。
必须同时设置：
-
-webkit-touch-callout: none：专治 iOS，禁用长按呼出的原生菜单；在安卓 Chrome 等非 WebKit 浏览器中无效 -
user-select: none：标准属性，阻止文本被选中，间接抑制部分安卓机型的长按菜单；注意它不影响图片长按保存行为
适用范围要精准：
- 对图片容器加
-webkit-touch-callout: none可防止“存储图像”菜单弹出 - 对文字区域加
user-select: none可避免“复制”“查找”等干扰 - 但输入框（
<input>、<textarea>）必须保留user-select: text和默认-webkit-touch-callout，否则用户无法选中、粘贴内容
JS 拦截双击和多点触控：touchstart + touchend 时间戳
viewport 和 CSS 只能约束缩放范围，无法阻止用户发起手势。真正兜底的是运行时拦截，且必须绑定到 document.documentElement，才能捕获全局事件，不受 iframe 或动态内容影响。
两个核心拦截点：
- 双指缩放：监听
touchstart，检测event.touches.length > 1，立即event.preventDefault()；必须传{ passive: false }，否则 Safari/Chrome 会静默忽略 - 双击放大：本质是两次
touchend间隔 ≤ 300ms，需缓存上一次时间戳，第二次到来时拦截；不要监听dblclick—— iOS Safari 根本不触发该事件
示例关键代码：
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 “更大字体”）引发的缩放不可控，也不该被禁用。真正要防的是误触和抖动，不是可访问性本身。
