如何处理 Safari iOS 缩放输入字段
How to handle Safari iOS zoom on input fields
我的响应式 Web 应用程序（由 Angular Material 制作）工作正常，除了 iOS/Safari 上的输入字段：当用户关注输入字段时，iOS 会缩放 Web页。然后缩放级别保持不变，破坏了应用程序的响应能力（因为那时，视口变得可滚动，例如工具栏不再粘在顶部。此外，一些元素应该始终在左侧和右侧可见, 由于缩放而在可见区域之外）。
我遵循了各处给出的建议，例如 https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/ and 。
几乎可行的方法是在 HTML header 中使用以下内容：
<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”事件的技巧（在第二个 link 中给出）不起作用（我怀疑是因为在 single-page 应用程序中更改页面时不会调用它喜欢 Angular)
- 使用
font-size=16px 的技巧对我不起作用（许多人也报告）。
有没有人有什么建议，给：
- 要么防止焦点在输入字段上导致缩放
- 或在此操作后将缩放重置为 1
- 同时允许用户根据需要手动缩放视图
？
您的字体大小是否小于 16px？
您可能遇到与 Angular Material 无关的浏览器行为。
我的团队遇到了类似的问题。我们发现您的问题是我们工作的一部分。我们最终意识到我们看到的视口缩放行为与 Angular Material 无关。当输入字段上的字体小于 16px 时，这就是 iOS 所做的：https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ 任何输入字段。 Angular Material与此无关。
相关：请注意，在引入 iPhone 后的大约十年里，禁用移动设备的视口缩放是标准做法，但它不再是 The Way。 https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/
我的响应式 Web 应用程序（由 Angular Material 制作）工作正常，除了 iOS/Safari 上的输入字段：当用户关注输入字段时，iOS 会缩放 Web页。然后缩放级别保持不变，破坏了应用程序的响应能力（因为那时，视口变得可滚动，例如工具栏不再粘在顶部。此外，一些元素应该始终在左侧和右侧可见, 由于缩放而在可见区域之外）。
我遵循了各处给出的建议，例如 https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/ and
几乎可行的方法是在 HTML header 中使用以下内容：
<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”事件的技巧（在第二个 link 中给出）不起作用（我怀疑是因为在 single-page 应用程序中更改页面时不会调用它喜欢 Angular) - 使用
font-size=16px的技巧对我不起作用（许多人也报告）。
有没有人有什么建议，给：
- 要么防止焦点在输入字段上导致缩放
- 或在此操作后将缩放重置为 1
- 同时允许用户根据需要手动缩放视图 ？
您的字体大小是否小于 16px？
您可能遇到与 Angular Material 无关的浏览器行为。
我的团队遇到了类似的问题。我们发现您的问题是我们工作的一部分。我们最终意识到我们看到的视口缩放行为与 Angular Material 无关。当输入字段上的字体小于 16px 时，这就是 iOS 所做的：https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ 任何输入字段。 Angular Material与此无关。
相关：请注意，在引入 iPhone 后的大约十年里，禁用移动设备的视口缩放是标准做法，但它不再是 The Way。 https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/