HTML5中仅用user-scalable=no无法彻底禁用缩放，需配合initial-scale=1.0、maximum-scale=1.0、minimum-scale=1.0等viewport参数，并辅以CSS touch-action和JavaScript防御，但须兼顾WCAG可访问性要求。
在 HTML5 中，仅靠 user-scalable=no 并不能“彻底”禁止用户缩放，尤其在现代移动浏览器（如 iOS Safari、Chrome for Android）中，该属性已被部分忽略或弱化处理。但可以通过合理配置 并配合其他手段，实现**实际可用的缩放限制效果**。
正确设置 viewport 的基础参数
必须同时锁定缩放范围，不能只写 user-scalable=no。推荐写法如下：
关键点说明：
-
initial-scale=1.0：确保页面以 1:1 像素比初始渲染 -
maximum-scale=1.0和minimum-scale=1.0：强制缩放区间为 [1,1]，比user-scalable=no更可靠 -
user-scalable=no：虽被部分浏览器降级处理，但仍作为辅助声明保留
iOS Safari 的特殊限制与应对
iOS 13+ 的 Safari 明确不响应 user-scalable=no（尤其是双指捏合），这是苹果出于可访问性考虑的主动限制。此时：
- 仍需设置
maximum-scale=1.0和minimum-scale=1.0，多数情况下可阻止手势缩放 - 若用户通过「设置 → 辅助功能 → 显示与文字大小 → 更大字体」开启动态字体，页面仍可能重排——这属于系统级行为，无法用 viewport 拦截
- 避免使用
text-size-adjust: none（已废弃且无效），改用text-size-adjust: 100%防止字体意外放大
增强控制：补充 CSS 与 JavaScript 防御
viewport 是第一道防线，但非万能。可叠加以下措施提升稳定性：
- CSS 中添加：
* { touch-action: manipulation; }
减少误触发双击缩放（尤其按钮/链接区域） - 监听
gesturestart事件并preventDefault()（注意：iOS Safari 不支持该事件，Android Chrome 可用） - 禁用双击缩放（有限效）：
重要提醒：可访问性与合规性
完全禁止缩放可能违反 WCAG 2.1（AA 级要求允许 200% 缩放）。若面向公众网站，建议：
- 仅在 Web App（如 PWA、内部管理后台）等明确场景下禁用缩放
- 对普通内容站，优先优化响应式布局 + 流体字体（
rem/clamp()），而非强行锁死 - 测试时用真机（特别是 iPhone）验证，模拟器行为可能不一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
