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.
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.
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.
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.
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.
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
viewportalso 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.
Whoops, meant to paste the debug mode link!
@Maurice, iOS10 and higher ignore
ù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.
@Manuel you can wrap it in
CSS.supportscall for “mobile Safari” features:
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.
I believe I may have just found a better solution than the ones posted. I put it on Stack Overflow here…
user-scalable=noand 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" />