user-scalable=no 在现代移动端已不可靠，iOS Safari 10.3+ 和多数新版 Android 浏览器会直接忽略它；应改用 minimum-scale=1.0, maximum-scale=1.0 配合 width=device-width 和 initial-scale=1.0，并辅以 touchstart/touchend 事件拦截及 touch-action: pan-x pan-y 局部优化。
user-scalable=no 在现代移动端已不可靠，iOS Safari 10.3+ 和多数新版 Android 浏览器会直接忽略它——这不是你写错了，是浏览器主动拒绝执行。
viewport 中写 user-scalable=no 为什么经常失效
它确实曾是主流方案，但现在失效有明确原因：
- iOS Safari 自 10.3 起将
user-scalable=no视为可访问性障碍，强制绕过；即使控制台不报错，双指缩放仍能触发 - 当页面内容高度超出视口（
document.documentElement.scrollHeight > window.innerHeight），iOS 会自动启用双指缩放以查看溢出区域，此时user-scalable=no彻底无效 -
user-scalable=0或user-scalable=false不在标准中，各浏览器行为不一致，纯属碰运气 - 该标签必须静态写在
最早位置；JS 动态插入的完全无效，浏览器解析完 HTML 就已锁定视口策略
真正起效的 viewport 配置组合
用 minimum-scale 和 maximum-scale 替代粗暴禁用，既保留基础可访问性，又约束异常缩放：
- 必须包含
width=device-width和initial-scale=1.0，否则 scale 类参数可能被忽略 -
minimum-scale=1.0, maximum-scale=1.0是目前最广泛兼容且被尊重的取值，比单写user-scalable=no更稳妥 - 不要省略
initial-scale=1.0，否则某些安卓机首次加载时可能意外缩放 - 示例正确写法：
必须配合 JS 拦截多点触控和双击
viewport 失效后，唯一实操路径是运行时拦截手势事件：
- 双指缩放本质是
touchstart时event.touches.length > 1，需在document.documentElement上监听并调用event.preventDefault() - 双击放大由连续两次
touchend（间隔 ≤ 300ms）触发，需缓存时间戳并拦截第二次 - 必须传
{ passive: false }，否则 Chrome / Safari / Edge 会静默忽略preventDefault() - 示例关键代码：
document.documentElement.addEventListener("touchstart", function (event) {<br> if (event.touches.length > 1) event.preventDefault();<br>}, { passive: false });<br><br>let lastTouchEnd = 0;<br>document.documentElement.addEventListener("touchend", function (event) {<br> const now = Date.now();<br> if (now - lastTouchEnd lastTouchEnd = now;<br>}, { passive: false });
touch-action: manipulation 的作用与局限
这个 CSS 属性不能“禁止缩放”，但能显著降低误触概率：
-
touch-action: pan-x pan-y明确告诉浏览器：“此区域只允许平移”，从而抑制缩放、双击等默认手势 - 适合加在轮播图容器、地图、表单区域等局部敏感元素上，例如：
- 它无法替代 viewport 配置或 JS 拦截，仅作辅助；单独使用对全局缩放无效
- 注意：iOS Safari 对
touch-action支持较晚，13.4+ 才完全稳定真正难处理的不是双指或双击，而是系统级辅助功能缩放（如 iOS「显示与文字大小」中开启「更大字体」或「更大的辅助功能字体」）——这部分完全无法通过前端代码禁用，也不应尝试禁用。设计时预留足够的行高、字重和点击热区，才是面向真实用户的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
