通过修改 viewport 的 user-scalable 属性为 "yes"，并配合合理的初始缩放设置，即可在 angular 应用中支持移动端触控缩放（含缩小），突破默认禁止缩放的限制。
在 Angular（或其他前端框架）开发响应式移动应用时，常因用户体验或内容展示需求，需要允许用户通过双指捏合（pinch-to-zoom）自由缩放页面——不仅放大，也需支持缩小。然而，默认配置 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 明确禁用了用户缩放功能，导致即使手势有效，浏览器也会忽略缩放操作（尤其是 zoom-out）。
✅ 正确做法是启用用户缩放能力：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=3.0">
? 关键参数说明：
- user-scalable=yes：允许用户通过手势缩放（必设）；
- minimum-scale=0.5：设定最小缩放比例（如 0.5 表示可缩小至原始尺寸的 50%）；
- maximum-scale=3.0：限制最大缩放倍数，避免过度放大影响布局；
- initial-scale=1.0 保持默认起始缩放，确保首次加载适配设备宽度。
⚠️ 注意事项：
- 某些 iOS 版本对 user-scalable=no 有强限制（尤其 Safari），一旦禁用，即使 JS 拦截 touch 事件也无法绕过原生缩放拦截；
- 启用缩放后，请务必进行真实设备测试（iOS Safari / Android Chrome），确保表单控件、点击热区、字体可读性不受影响；
- 若应用内含 Canvas、SVG 或固定像素布局组件，缩放可能导致渲染失真，建议结合 window.visualViewport 监听缩放变化并动态调整；
- 对于无障碍（a11y）合规要求，WCAG 1.4.4（Resize Text）明确建议支持至少 200% 缩放，因此 user-scalable=yes 不仅是功能需求，也是可访问性最佳实践。
总结：只需将 viewport 中 user-scalable=no 改为 yes，并合理设置 minimum-scale 和 maximum-scale，即可安全、可靠地支持移动端触控缩放（含缩小）。无需额外 JavaScript，纯 HTML 配置即生效。
