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

Question

当用户从iPhone/iPad登录我的应用程序时,Safari(有用)会在用户填写用户名/密码字段时放大.但是当提交表单并将其登录时,我们不会重新加载页面(这是单页面应用程序),因此不会重置缩放.所以应用程序总是以放大的比例开始.

我查看了Jeremy Keith的解决方案,该解决方案成功地重置了缩放,但也阻止了用户将来进行缩放/缩放,因为他设置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

我发现工作的有点hacky,但似乎有效.基本上,在表单提交时,我正在设置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');
      }
   }
}