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?

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?

• javascript
• html
• ios
• mobile-safari

Share Improve this question Follow edited Apr 28, 2015 at 19:56 Bryce Johnson asked Apr 28, 2015 at 18:56 Bryce JohnsonBryce Johnson 6,93177 gold badges4646 silver badges5252 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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