自动放大表格后如何触发iPhone缩小？答案

【问题标题】：How to trigger iPhone zoom-out after auto zoom-in to a form?自动放大表格后如何触发iPhone缩小？
【发布时间】：2011-08-27 04:23:55
【问题描述】：

我有一个使用 jQuery 提交搜索的 Web 表单。表单本身不会触发提交事件，因为我捕获并删除了它（这是一个更大、更复杂的表单的一部分，我正在使用渐进增强来添加此功能）。

在 iPhone 上，一旦获得焦点，浏览器就会自动放大我的搜索输入。在“输入”按键事件中，搜索是通过 javascript 执行的，我模糊了输入，这会关闭屏幕上的 iPhone 键盘，但浏览器会保持放大到输入区域。

有没有办法通过 javascript 以编程方式再次触发缩小到初始视口区域？

编辑：搜索执行没有重定向，这通常会在新页面加载时重置视口 - 一切都发生在一个页面上。

【问题讨论】：

似乎有几种解决方案。检查以下网址：- [在此处输入链接描述][1] [1]：stackoverflow.com/questions/24310074/…

标签： javascript jquery iphone jquery-events

【解决方案1】：

.css

input[type=search] {
    font-size: max(1em, 16px);
}

如其他答案中所述，使用 16px 字体大小

首先防止浏览器放大
避免在元标记中使用最大比例，以防止放大其他标记浏览器

【讨论】：

【解决方案2】：

您是否需要或想要允许人们进行缩放？如果没有，您是否在脑海中设置了这个元标记？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

据我所知，这将首先停止缩放问题。

【讨论】：

如果您关心可访问性，这是一个非常糟糕的主意。
这对可访问性本身来说还不错。如果您在不需要的地方滥用它，这对可访问性不利。在某些情况下，这是一个非常有用且重要的功能。无论如何，我认为您不能再阻止放大 iOS。
我不同意。作为用户，如果我需要缩放以获得更好的文本易读性，我不想受到最大比例级别的限制。这个元完全禁用了该能力。这个话题已经在互联网上讨论了 1000 次，普遍的共识是不要禁用扩展。苹果也在 iOS10 中禁用了这个元标记——medium.com/@johan_ronsse/…
Apple 将忽略 iOS10 的最大规模和用户可扩展性，因此即使这样，该解决方案也将是 a11l 友好的 - 它不再起作用。 medium.com/@johan_ronsse/…
是的，99% 的时间人们应该能够缩放，但想象一下你有一个具有复杂手势的网页游戏。我可以想象它令人沮丧或需要冗长的 JavaScript 来解决它。这对任何人都不好。无论如何，如果 Apple 删除它是没有意义的，只是想补充一下为什么它可能并不总是“坏”的原因。

【解决方案3】：

如果输入的字体大小至少为 16 像素，则不会触发放大。

【讨论】：

这真的很有帮助！非常感谢！
这感觉比用Javascript摆脱这个纸袋要好得多。
这是解决问题的方法 - 与 width=device-width,initial-scale=1 一起工作，而不需要 maximum-scale。

【解决方案4】：

我已经成功使用了以下内容。

$('input, select, textarea').on('focus blur', function(event) {
    $('meta[name=viewport]').attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>

<body>
  <input id="input" type="text" placeholder="Type here..." />
</body>

【讨论】：

谢谢。我们甚至不得不这样做感觉很可怕......为什么用户在填写输入后想要保持放大？！
点击输入后这不会留在新视口中吗？如果是这种方法，为什么不直接使用该视口开始呢？
为了澄清我之前的评论，这不会阻止放大输入的下一个输入吗？
否，因为它在“焦点”事件上将缩放设置为 10。这就是为什么她在分配缩放级别之前使用三元语句检查事件类型的原因。
这对我在 Mobile Safari 14 上不起作用