如何在移动 Safari 中提交表单后重置缩放，同时保持用户可扩展性？

Question

当用户从 iPhone/iPad 登录我的应用程序时，Safari（有用地）在用户填写 username/password 字段时放大。但是当提交表单并登录时，我们不会重新加载页面（这是一个单页应用程序），因此永远不会重置缩放。因此，该应用程序始终以放大的比例启动。

我看过 Jeremy Keith's solution，它成功地重置了缩放，但也阻止了用户将来 scaling/zooming，因为他设置了视口的 maximum-scale。

像这样：

var viewportmeta = document.querySelector('meta[name="viewport"]');

if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
}

有没有人看到一个很好的解决方案，可以在提交表单后重置它，而不会随后冻结视口？

Answer 1

我发现工作有点老套，但似乎有效。基本上，在提交表单时，我会设置 maximum-scale，然后立即将其删除。希望这对某人有所帮助。

element.on('submit', function(event) {
    if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
      var viewportmeta = document.querySelector('meta[name="viewport"]');
      if (viewportmeta) {
        viewportmeta.setAttribute('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0');
        viewportmeta.setAttribute('content', 'width=device-width, minimum-scale=1.0, initial-scale=1.0');
      }
   }
}

如何在移动 Safari 中提交表单后重置缩放，同时保持用户可扩展性？

How can I reset the zoom after form submission in mobile Safari, while maintaining user scalability afterwards?

html

javascript

mobile-safari

ios