HomePosts

Make Sure To Set Your Inputs and Buttons To At Least 16px or Safari will Zoom Into Them

Published: Updated:

I was working on adding a search page and I noticed that iOS Safari was zooming into the inputs. I assumed that this was for accessibility, which is great but it wouldn’t zoom out again once I was done.

Download video [514 KB]

Thankfully, many people better at CSS than me have also had this problem to which the solution is to set the font-size of the inputs to at least 16px:

input, button {
    font-size: 16px;
}

1rem will do, but you probably don’t want to assume that it’ll always be the case. Better yet, you can inherit all the font styles like Josh Comeau does:

input, button, textarea, select {
    font: inherit:
}