JavaScript Website — Clicking an Input on a Phone Causes Screen Zoom

Sometimes, when a user visits a website from their phone and clicks a form field, the screen zooms in on the page.

Why is this happening?

Usually, the problem lies with the font size of your input. If the input font was reduced below 16px, even just a little bit, the mobile device zooms in on the view so the user can better see any text.

A really simple fix is to add the following to your root .scss file:

@media screen and (max-width: 767px) {
     input, select, textarea {
          font-size: 16px !important;
     }
}

The above code is only impacting screens under 767pxin width, which should cover most phones and tablets. It’s taking any input, dropdown, or textarea and making sure the font size is appropriate for mobile devices.