Javascript 自动放大到表单后如何触发iPhone缩小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6030319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to trigger iPhone zoom-out after auto zoom-in to a form?
提问by bbodien
I have a web form that uses jQuery to submit a search. The form itself doesn't fire the submit event because I catch that and drop it (this is all part of a much larger and more complex form and I'm using progressive enhancement to add this functionality).
我有一个使用 jQuery 提交搜索的 Web 表单。表单本身不会触发提交事件，因为我捕获并删除它（这是一个更大更复杂的表单的一部分，我正在使用渐进增强来添加此功能）。
On the iPhone, the browser automatically zooms in to my search input as soon as it is focused. On an "enter" keyup event, the search is executed via javascript, and I blur the input which dismisses the on screen iPhone keyboard, but the browser stays zoomed in to the input area.
在 iPhone 上，浏览器一聚焦就自动放大我的搜索输入。在“输入”keyup 事件中，搜索是通过 javascript 执行的，我模糊了关闭屏幕 iPhone 键盘的输入，但浏览器保持放大到输入区域。
Is there a way to programatically trigger zooming out again back to the initial viewport area via javascript?
有没有办法通过javascript以编程方式再次触发缩小回到初始视口区域？
EDIT: there's no redirect on search execution which would normally reset the viewport when the new page loads - everything happens on one page here.
编辑：搜索执行没有重定向，通常会在新页面加载时重置视口 - 一切都发生在这里的一页上。
回答by whistler
If the input's font-size is a minimum of 16px the zoom in will not be triggered to begin with.
如果输入的字体大小最小为 16px，则不会触发放大。
回答by Shayna Symons
I've used the following successfully.
我已经成功使用了以下内容。
$('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>
回答by Michael Giovanni Pumo
Do you need or want to allow people to zoom at all? If not, have you set this meta tag in your head?
您是否需要或想要允许人们进行缩放？如果没有，您是否在脑海中设置了这个元标记？
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
As far as I'm aware, that will stop the zoom issue in the first instance.
据我所知，这将首先阻止缩放问题。
