Javascript to Zoom out on mobile

Question

I have an app that I am building with JS, PHP and HTML. The user enters a zip code, there is then an AJAX call to the PHP that queries the database and returns a list of companies within so many miles of that zip code. The content of the page is then changed to list those companies.

The problem I am running into is that when I click on the input to enter my zip code, the screen zooms in to make the input the width of the screen. After my AJAX, when the content is repopulated, the screen stays right where it was (at the bottom of the page) and it also stays zoomed in. I have already programmatically added JS to make the screen go back to the top using the scrollTop function. Is there a way for me to make the screen zoom back out?

Answer 1

You need a viewport meta tag in your HTML to disable zooming altogether on mobiles and tablets (as well as most desktops now):

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

When adding this, the maximum-scale and minimum-scale values will require your page to always stay at the original size.