如何处理 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

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

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

我的团队也遇到了类似的问题。 我们发现您的问题是我们工作的一部分。 我们最终意识到我们看到的视口缩放行为与 Angular Material 无关。 这就是 iOS 在输入字段上的字体小于 16px 时所做的操作： 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/

Answer 2

我最近遇到了这个问题并设法找到了解决方法。

对于那些使用 Angular、React、Vue 等框架的人，请确保在 head 元素中检查这部分代码：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, viewport-fit=cover">

尝试将最大比例属性调整为 1 并再次测试。这可能会解决 iOS +17 放大引起的问题。