如何处理 Safari iOS 对输入字段的缩放

Question

我的响应式 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
• 同时让用户根据需要手动缩放视图？

Answer 1

你们的字体大小是否小于 16 像素？

您可能遇到与 Angular Material 无关的浏览器行为。

我的团队也遇到了类似的问题。我们发现您的问题是我们工作的一部分。我们最终意识到，我们看到的视口缩放行为与 Angular Material 无关。这就是当输入字段上的字体小于 16px 时 iOS 所做的简单操作：https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ 任何输入字段。Angular Material 与此无关。

相关：请注意，在 iPhone 推出后的大约十年里，禁用移动设备的视口缩放是标准做法，但它不再是正确的方式。 https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/