This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
I just came across this tweet from Josh Comeau. Josh shared that Safari is not "zooming into" focused form elements if they have a font size of or larger than 16px. I don't have an iPhone, but I can imagine that the zoom interaction is pretty distracting when you "just" want to fill out a form.
Why is Safari zooming in for controls that have a font size less than 16px? 16px is the default body font size for most browsers and is what you get after declaring font-size: 100%; on :root. 16px is the smalled accessible font size according to accessibility resources.
Josh's discovery is a fact that'll come in handy in the future because I had a few discussions about font sizes lately. Some folks tend to prefer small and light grey fonts – the less readable, the better. ?
I doubt that the iOS zoom argument will be the game-changer in these discussions, but the more arguments for accessible web design I have the more likely I can convince someone! ?
Reply to Stefan
This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
Stefan Judis | Sciencx (2021-07-04T22:00:00+00:00) Mobile Safari doesn’t zoom into form inputs with minimum 16px (#note). Retrieved from https://www.scien.cx/2021/07/04/mobile-safari-doesnt-zoom-into-form-inputs-with-minimum-16px-note/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.