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

Question

When a user logs into my application with an iPhone / iPad, Safari (usefully) scales when the user fills in the username and password fields. But when the form is submitted and we register it, we do not reload the page (this is a one-page application), so the scaling will never be reset. Thus, the application always starts with a scaled scale.

I reviewed Jeremy Keith's solution , which successfully rescales, but also prevents future scaling / scaling by the user as it sets the maximum-scale the viewport.

Like this:

 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'; } 

Has anyone seen a great reseller solution after submitting a form without freezing then in the viewport?

Answer 1

What I found to work is a bit hacked but seems effective. Basically, when I submit the form, I set maximum-scale , and then immediately delete it. Hope this helps someone.

 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'); } } }