我有一个使用 jQuery 提交搜索的 Web 表单。表单本身不会触发提交事件，因为我捕获了该事件并将其删除（这是一个更大、更复杂的表单的一部分，我正在使用渐进增强来添加此功能）。
在 iPhone 上，浏览器一旦获得焦点就会自动放大到我的搜索输入。在“输入”键盘事件中，搜索是通过 javascript 执行的，我模糊了输入，从而消除了屏幕上的 iPhone 键盘，但浏览器仍然放大到输入区域。
有没有办法通过 JavaScript 以编程方式再次触发缩小回到初始视口区域？
编辑：搜索执行没有重定向，通常会在新页面加载时重置视口 - 一切都发生在此处的一页上。
如果输入的字体大小至少为 16px，则不会开始触发放大。
您是否需要或想要允许人们缩放？如果没有，你脑子里有设置这个元标签吗？
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
据我所知，这将首先解决缩放问题。
我已经成功使用了以下内容。
$('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>
.css
input[type=search] {
font-size: max(1em, 16px);
}
正如其他答案中提到的，使用 16px 字体大小
上面的焦点和模糊事件对我不起作用。 为了确保 Safari 缩小模糊并随后将“最大比例”重置为 10，我这样做了：
需要在模糊和焦点事件上调用该函数，因为 onFocus 事件将清除超时。这是为了防止用户直接从一个输入字段进入另一个输入字段。
let iosZoom10Timer: any = null;
let iosZoom1Timer: any = null;
function handleZoomOnIOS(e) {
if (e.type === 'blur') {
iosZoom1Timer = setTimeout(
function () {
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width,initial-scale=1,maximum-scale=1');
iosZoom10Timer = setTimeout(
function () {
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width,initial-scale=1,maximum-scale=10');
}, 100);
}, 100);
}
else if (e.type === 'focus') {
clearTimeout(iosZoom1Timer);
}
}