Tue Jun 27 2023

How to remove zoom when input is focused on a mobile web application

I came across an annoying "issue" on my website the other day - and it was the fact that my mobile browser (Safari) auto zoomed when I was about to type in my input field. It is not the end of the world, but still a little bit annoying.

In this guide, I will share how we can fix it.

Viewport meta tag

The first thing to debug is the viewport meta data. The viewport is the window that the user can see on their device, not including any hidden content behind scrolling etc.

There are certain properties that can be set in the head tag of your HTML in order to specify the viewport and its behaviour.

The properties are:

width
height
initial-scale
minimal-scale
maximum-scale
user-scalable
interactive-widget

Width property will control the size of the viewport. The width can be set to either a pixel value of maximum 10000 or with device-width which will equal to 100%.

Height will control the size of the viewport for the height. It can be either pixel value or device-height.

Initial scale will control the zoom level of when the page is initially loaded. The range is 0.1 - 10 where 1 is default.

Minimum scale controls the maximum of zoom out that should be allowed. Default is 0.1 and the range goes from 0.1 - 10.

Maximum scale will control how much the page can be zoomed in. The range is 0.1 - 10 where 10 is default.

User scalable sets the availability for what the user should be allowed to do in terms of zooming. It can be yes, no, 0 or 1.

Interactive widget will control the effects on UI widgets. The values allowed are resizes-visual, resizes-content or overlays-content where resizes-visual is default.

Configure viewport meta to remove zoom

We could add some data to our viewport tag to prevent the zoom to happen. Such as maximum-scale=1. However, this can lead to problems if we want the users to be able to zoom on other places in our app.

Example of how it can be configured in the <head>:

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

Note that in some browsers, it doesn't have the effect on auto focused elements, only on the manual zoom ability.

Best solution (in my view)

The best way of fixing this issue, is to change the font size of our form elements, such as the inputs and text areas. By setting the font to 16px, the mobile browser won't zoom in since it will be considered as accessible by the browser.

So in my personal opinion, I would keep my viewport meta data to something like:

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

and then go over and change the fonts on the elements that are causing the unwanted zoom behaviour. And then it should be working across the browsers, without stopping the user's ability to zoom.

Conclusion

In this article, we covered the fundamentals of viewport meta tag in HTML and how it can be configured to prevent zoom etc. And also a solution to the problem of unwanted zoom in mobile devices when input elements are focused.

Thanks for reading, and have a great day.