how to reset screen zoom after auto zoom in forms

I'm no expert in javascript/jquery and have searched and searched to find an answer to my situation. Some answers have been close but I'm not sure how to translate it to my own situation.

I have a form on my website which conveniently zooms in on mobile devices for the user to input their data. After they hit 'submit' the screen zoom remains the same and the post-submit message is not seen since it's out of the viewport. Is there a way to reset the screen zoom after form submission?

I've found the metatag 'viewport' and can change that so that the zoom function doesn't trigger at all

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

but I'd still like the zoom function to be there...

Answers 1

  • You can update viewport on form submit, like:-

      element.on('submit', function(event) {
         var viewportmeta = document.querySelector('meta[name="viewport"]');
         if (viewportmeta) {
            viewportmeta.setAttribute('content', 'width=device-width, maximum-scale=1.0, initial-scale=1.0');

    Try this.

Related Articles