在 angular 应用中，若需支持移动端触摸缩放（尤其是缩放缩小），关键在于正确配置 html 的 viewport meta 标签，将 `user-scalable` 设为 `yes` 并确保无其他限制性 css 或 javascript 干预。
默认情况下，许多 Web 应用（尤其是 PWA 或响应式单页应用）会禁用用户缩放以追求“一致”的 UI 体验，例如设置 。这虽能防止误操作，但也彻底禁用了双指捏合缩放（包括放大和缩小），导致用户无法根据需要调整内容可视尺寸。
要恢复完整的触摸缩放能力（含缩小），只需将 user-scalable 属性显式设为 "yes"：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
⚠️ 注意事项：
- user-scalable=yes 是必要但非充分条件：还需确保页面未通过 CSS 设置 touch-action: none 或 transform: scale() 等干扰原生缩放行为的样式；
- iOS Safari 特别要求：若同时设置了 maximum-scale 或 minimum-scale，即使 user-scalable=yes，也可能因范围限制而无法实际缩小（例如 minimum-scale=1.0 会锁死最小缩放值）。如需完全自由缩放，建议移除 minimum-scale 和 maximum-scale，或设为合理区间（如 minimum-scale=0.5, maximum-scale=3.0）；
- 可访问性考量：WCAG 2.1 明确要求允许用户缩放到 400%，禁用缩放可能违反 AA 级可访问性标准。生产环境建议保留缩放能力，并通过响应式设计保障缩放后布局可用；
- Angular 项目修改位置：该 meta 标签通常位于 src/index.html 中，修改后无需额外构建步骤，刷新即生效。
✅ 推荐的健壮 viewport 配置（兼顾兼容性与可访问性）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=5.0, user-scalable=yes">
最后提醒：若业务场景确需禁用缩放（如 Canvas 绘图、游戏界面），应优先考虑通过 transform: scale() + 自定义手势库实现可控缩放，而非依赖原生 viewport 锁定——后者既牺牲用户体验，也增加无障碍合规风险。
