不能靠纯CSS禁止用户缩放，user-scalable=no必须写在<meta name="viewport">中，因浏览器在HTML解析初期即锁定缩放行为，CSS属渲染层无法干预；正确写法为<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，且需配合JS监听gesturestart/end事件增强防护。
不能靠纯 CSS 禁止用户缩放——user-scalable=no 是 <meta name="viewport"> 的属性，CSS 里没有等效控制项。
为什么 user-scalable=no 必须写在 <meta> 标签里
浏览器在解析 HTML 初始阶段就根据 <meta name="viewport"> 决定是否启用双指缩放、初始缩放比例等行为。CSS 是渲染层逻辑，此时缩放能力早已被 UA（用户代理）锁定或释放。即使你用 transform: scale() 或 zoom 模拟缩放，也无法禁用原生手势。
常见错误现象：
– 在 CSS 里写 body { touch-action: none; }，结果双指仍可缩放
– 用 @media (max-width: ...) 套一堆规则，但 pinch-to-zoom 依然生效
-
touch-action: none只影响触摸事件分发（比如禁用滑动），不干预缩放 -
pointer-events: none会让整个页面失焦，连点击都失效，不是缩放控制方案 - 部分 iOS WebKit 版本会忽略
user-scalable=no（尤其 iOS 10+），这是系统级限制，非 bug
<meta name="viewport"> 的正确写法与兼容性注意点
必须放在 <head> 中，且优先级高于任何 CSS 或 JS。最简有效写法：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
关键参数说明：
-
width=device-width：必需，否则scale行为不可预测 -
initial-scale=1.0：明确初始缩放，避免 iOS 自动缩放到文本宽度 -
maximum-scale=1.0+user-scalable=no：双保险，部分 Android 浏览器只认前者 - 不要加
minimum-scale=1.0，它会导致横屏时内容被裁切（因 viewport 宽度变大但最小缩放锁死）
⚠️ 注意：iOS 13.4+ 和 Safari 15.4+ 已开始弱化 user-scalable=no 的强制性——当用户长按链接或输入框触发放大镜时，仍可能临时放大；这是无障碍强制策略，无法绕过。
JS 辅助防御（仅限必要场景，慎用）
纯 <meta> 不足以应对所有情况（如用户通过地址栏手动缩放、某些安卓定制浏览器）。可加一层轻量 JS 监听并重置：
document.addEventListener('gesturestart', e => e.preventDefault());<br>document.addEventListener('gestureend', e => e.preventDefault());
但要注意：
- 这两个事件仅在支持多点触控的环境触发，Safari 桌面版、旧版 Chrome 不支持
- 会同时拦截旋转、平移等手势，可能破坏轮播图或地图交互
- 不能替代
<meta>，必须配合使用，否则无效 - 部分 PWA 场景下，Service Worker 缓存了旧 HTML，导致新
<meta>未生效，需清缓存验证
真正难处理的不是“怎么写”，而是「何时该禁」：表单输入、小字号文本、色弱用户依赖缩放阅读时，硬性禁止反而违反 WCAG 1.4.4（缩放要求）。如果业务强依赖固定布局（如 H5 游戏、AR 页面），才考虑组合使用 <meta> + JS；其他情况，优先优化响应式和可访问性，而不是封死缩放。
