自动放大表单后如何触发 iPhone 缩小？
[英]How to trigger iPhone zoom-out after auto zoom-in to a form?
问题描述
I have a web form that uses jQuery to submit a search.
我有一个 web 表单，使用 jQuery 提交搜索。 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).表单本身不会触发提交事件，因为我捕获并删除了它（这是一个更大、更复杂的表单的一部分，我正在使用渐进式增强来添加此功能）。
On the iPhone, the browser automatically zooms in to my search input as soon as it is focused.在 iPhone 上，浏览器一旦聚焦就会自动放大我的搜索输入。 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.在“输入”按键事件中，搜索是通过 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.编辑：搜索执行时没有重定向，这通常会在新页面加载时重置视口 - 一切都发生在此处的一页上。
5 个解决方案
解决方案1
34 2015-11-11 16:10:38
如果输入的字体大小最小为 16px，则不会触发放大。
解决方案2
9 2015-04-23 14:11:52
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>
解决方案3
7 2015-04-23 10:07:39
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.据我所知，这将首先阻止缩放问题。
解决方案4
1 2021-03-11 20:24:14
.css .css
input[type=search] {
font-size: max(1em, 16px);
}
as mentioned in other answers, using the 16px font size如其他答案中所述，使用 16px 字体大小
- prevents the browser from zooming in the first place首先阻止浏览器放大
- avoids using maximum-scale in the meta tag which prevents zooming in other browsers避免在元标记中使用最大比例，以防止在其他浏览器中放大
解决方案5
1 2022-03-30 14:38:05
the focus and blur event above did not work for me, to ensure that safari zooms out on blur and that it resets the "maximum-scale" to 10 afterwards I did this:上面的 focus 和 blur 事件对我不起作用，以确保 safari 缩小模糊并在之后将“最大比例”重置为 10 我这样做了：
the function needs to be called on both blur and focus events, as the onFocus event will clear the timeout. function 需要在 blur 和 focus 事件上调用，因为 onFocus 事件将清除超时。 This is in case the user goes directly from one input field into another.这是为了防止用户直接从一个输入字段进入另一个输入字段。
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);
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.