小编bfr*_*123的帖子

我的响应式 Web 应用程序（使用 Angular Material 制作）工作正常，但 iOS / Safari 上的输入字段除外：当用户关注输入字段时，iOS 会缩放网页。然后缩放级别保持不变，破坏了应用程序的响应能力（因为那时视口变得可滚动，例如工具栏不再粘在顶部。此外，一些元素应该始终在左侧和右侧可见，由于缩放而位于可见区域之外）。

我遵循了这里和那里给出的建议，例如https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/和iOS Safari 缩放输入框。

一种几乎有效的方法是在 HTML 标头中使用以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>

然而，这对我来说还不够好：

• 设置user-scalable=0阻止用户缩放视图
• 设置maximum-scale=1还会阻止用户在 Chrome/Android 上缩放（即使user-scalable=yes）
• “”事件的技巧load（在第二个链接中给出）不起作用（我怀疑是因为在像 Angular 这样的单页应用程序中更改页面时不会调用它）
• 使用的技巧font-size=16px对我不起作用（就像很多人也报告的那样）。

有人有建议吗：

• 要么阻止焦点在输入字段上导致缩放
• 或执行此操作后将变焦重置为 1
• 同时让用户根据需要手动缩放视图？