Shaheer | Startup Partner

On iOS, focusing an input with text smaller than 16px zooms the whole page in. This is an accessibility feature. When the text is smaller than 16px, WebKit scales the page up to make it easier to read while typing. Sometimes you don't want this behavior and you may have noticed that some websites disable it. There are two common workarounds. The first is to use media queries and set inputs and textareas to a 16px font size on mobile. The second is to add `maximum-scale=1` to the viewport `<meta>` tag. The page cannot scale beyond `1`, so the automatic zoom never happens. Pinch zoom still works in WebKit-based browsers on iOS because they ignore the limit for manual zooming. Other browsers may respect it, which can prevent users from zooming and create an accessibility issue. I rarely override default accessibility behavior, but this is one of the cases where I do. I use the <meta> tag approach for temporary surfaces like a login page and use media queries everywhere else.