16px or Larger Text Prevents iOS Form Zoom

This was a great “Today I Learned” for me from Josh W. Comeau. If the font-size of an <input> is 16px or larger, Safari on iOS will focus into the input normally. But as soon as the font-size is 15px or less, the viewport will zoom into that input. Presumably, because it considers that type too small and wants you to see what you are doing. So it zooms in to help you. Accessibility. If you don’t want that, make the font big enough.

https://twitter.com/joshwcomeau/status/1379782931116351490?s=12

Here’s Josh’s exact Pen if you want to have a play yourself.

In general, I’d say I like this feature. It helps people see what they are doing and discourages super-tiny font sizes. What is a slight bummer — and I really don’t blame anyone here — is that not all typefaces are created equal in terms of readability at different sizes. For example, here’s San Francisco versus Caveat at 16px.

San Francisco on the left, Cavet on the right. Caveat looks visually much smaller even though the `font-size` is the same.

You can view that example in Debug Mode to see for yourself and change the font size to see what does and doesn’t zoom.

Comments

Johan

# May 5, 2021

I would like a bit more control in this regard. You either disable all zooming (accessibility disaster!) or have to deal with setting 16px (which leaves you with almost no room to display anything complex). There’s no in-between.

Luis Hernandez

# May 5, 2021

There is a way to bypass this, using transform: scale($target_font_size / 16); font-size: 16px.

It requires some trickery with the label to make sure the whole input is still clickable.

Maurice

# May 10, 2021

I’ve also used this method for quite some time, but moved away from it some months ago. Setting a minimum of 16px for your form controls felt out of balance with the body font size in a lot of my cases. So, with a little help of Google and Stack Overflow, I found out that setting maximum-scale=1 for your viewport also prevents zoom from happening, whatever the font size of the form control. I haven’t found any drawbacks of using this. Users are still alowed to zoom in on pages for example. Have a look at this pen.

Maurice

Permalink to comment# May 10, 2021

Whoops, meant to paste the debug mode link!

Manuel

# May 11, 2021

@Maurice, iOS10 and higher ignore maximum-scale, minimum-scale ànd ùser-scalable, as it was misused. That’s the reason it seems to be working. Other devices may not be able to zoom/scale, as they play by the rules they are given.
So it may be better to remove it again.

Ivan

# June 1, 2021

@Manuel you can wrap it in CSS.supports call for “mobile Safari” features:

// This prevents iOS zoom on focused form elements with font size smaller than 16px.
// iOS 10+ allows pinch-zoom even if viewport is unscalaeable.
// We feature detect those browsers and apply additional rules.
    if (
        window.CSS?.supports?.(
            '(font:-apple-system-body) and (-webkit-touch-callout:none) and (-webkit-tap-highlight-color:hotpink)'
        )
    ) {
        const viewport = document.querySelector('meta[name="viewport"]');
        if (viewport !== null) {
            viewport.content = `${viewport.content},user-scalable=no`;
        }
    }

Jeffery To

# June 4, 2021

As Luis Hernandez mentioned, there is a CSS-only solution involving the scale() transform that allows you to use font sizes smaller than 16px without having to disable page zooming.

I have a StackOverflow answer that outlines the technique and a blog post that goes into slightly more detail: No input zoom in Safari on iPhone, the pixel perfect way.

Jon

# September 27, 2021

I believe I may have just found a better solution than the ones posted. I put it on Stack Overflow here…

https://stackoverflow.com/a/69353771/56007

Aymane Lassfar

# December 8, 2022

I used user-scalable=no and it prevent the default zooming in iOS devices, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />

This comment thread is closed. If you have important information to share, please contact us.