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

时间:2015-04-28 18:56:59

标签: javascript html ios mobile-safari

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

我查看了成功重置缩放的Jeremy Keith's solution,但也阻止了用户将来进行缩放/缩放,因为他设置了视口的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';
}

有没有人看到一个很好的解决方案,在表单提交后重置这个,而不会在之后冻结视口?

1 个答案:

答案 0 :(得分:6)

我发现工作有点笨拙,但看起来很有效。基本上,在表单提交时,我设置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'); } } } ,然后立即删除它。希望这有助于某人。

{{1}}