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

Question

When a user logs in to my app from an iPhone/iPad, Safari (helpfully) zooms in while the user is filling out the username/password fields. But when the form is submitted and we log them in, we don't reload the page (this is a single page application), so the zoom is never reset. So the app is always started at a zoomed in scale.

I have looked at Jeremy Keith's solution, which successfully resets the zoom, but also prevents future scaling/zooming by the user, because he sets the maximum-scale of 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 nice solution for reseting this after a form submission, without freezing up the viewport afterwards?

Answer 1

What I found to work is a little hacky, but seems effective. Basically, on form submission, I'm setting the maximum-scale, and then immediately removing 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');
      }
   }
}