logo标签列表

如何在自动缩放到表单后触发iPhone缩小？

javascriptjqueryiphonejquery-events
44

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

在 iPhone 上，浏览器会自动缩放以聚焦到我的搜索输入框。在“回车”键按下事件上，通过 JavaScript 执行搜索，然后我使输入框失焦以关闭 iPhone 屏幕键盘，但浏览器仍停留在输入区域中缩放状态。

是否可以通过 JavaScript 编程方式触发缩放回到初始视口区域？

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

似乎有几种解决方案。请查看以下网址：-在此输入链接说明 - danjackknife
5个回答
42
如果输入框的字体大小最小为16像素，则不会触发缩放。
那真的很有帮助！非常感谢！ - Anton Savchenko
2
这种做法比通过JavaScript解决问题要好得多。 - Alec
1
这是解决问题的方法 - 与 width=device-width,initial-scale=1 一起工作，无需使用 maximum-scale。 - WEBjuju
10

你是否需要或者希望允许用户进行缩放操作？如果不需要，是否已经在head标签中设置了以下meta标签：

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

据我所知，这将在第一时间解决缩放问题。
4
如果你关心无障碍性，这个主意非常糟糕。 - Joshua Russell
本身而言，这并不是无障碍性的问题。如果您在不必要的情况下滥用它，那么它就会影响无障碍性。在某些情况下，这是非常有用和重要的功能。无论如何，我认为您不能再阻止iOS中的缩放了。 - Michael Giovanni Pumo
2
我必须表示不同意。作为用户，如果我需要放大以获得更好的文本可读性，我不想受到最大比例级别的限制。这种元标记完全禁用了该功能。这个话题已经在互联网上讨论了1000次，一般的共识是不要禁用缩放。苹果也在iOS10中禁用了此元标记 - https://medium.com/@johan_ronsse/re-apple-disabling-maximum-scale-behavior-on-responsive-websites-in-ios10-17bc7b0f27c0 - Joshua Russell
苹果将在iOS10中忽略maximum-scale和user-scalable，因此即使这个解决方案对所有设备友好，它也不再起作用。请参考https://medium.com/@johan_ronsse/re-apple-disabling-maximum-scale-behavior-on-responsive-websites-in-ios10-17bc7b0f27c0。 - jvoigt
2
是的，99% 的情况下人们应该能够缩放，但想象一下你有一个具有复杂手势的网络游戏。我可以想象这会很令人沮丧，或者需要大量的 JavaScript 代码来解决它。这对任何人都不好。无论如何，如果苹果正在删除它，那么这就是无意义的，但我只是想说明为什么它可能并不总是“坏”的原因。 - Michael Giovanni Pumo
9
我已经成功地使用了以下内容。
$('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>
11
谢谢。我们甚至需要这样做感觉很糟糕...用户为什么会想要在填写输入后保持缩放状态呢？！ - Darryl Snow
这样做会不会在单击输入后保留新的视口？ 如果是这种方法，为什么不一开始就使用那个视口呢？ - Goose
为了澄清我的上一条评论，这难道不会防止放大下一个输入吗？ - Goose
不，因为它会在“focus”事件中将缩放设置为10。这就是她在分配缩放级别之前使用三元语句检查事件类型的原因。 - Magenta Nova
这在我的移动版Safari 14上没有起作用。 - Adam Libuša
3

.css

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

如其他回答所述，使用16像素字体大小：

  1. 可以防止浏览器首先缩放。
  2. 避免在 meta 标签中使用 maximum-scale，从而防止在其他浏览器中进行缩放。
1

上述的焦点和失焦事件对我没有用，为了确保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);
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接