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

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.

  • How to save page state during close
  • How can I remove elements in an iframe using JQuery?
  • li text doesn't appear when I add class
  • How to advance the selected option via button click (jQuery)
  • How to add a background to text only?
  • Trouble with multi-level collapsible Bootstrap side-nav menu
  • 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?

  • HTML5 Game, canvas or div?
  • focus() is not working in edge browser
  • Count and add Dynamic ID and for values for form elements using javascript
  • How can I control the expansion direction of a drop-down list?
  • How do I use Javascript to auto resize the height of my Facebook tab?
  • Update html canvas tag on every ajax request with new data
  • One Solution collect form web for “How can I reset the zoom after form submission in mobile Safari, while maintaining user scalability afterwards?”

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