One thing about iOS browsers that can be pretty frustrating, both as a developer and as a user, is when you open a site on an iPhone or iPod Touch (not iPad) and want to enter some text in a text field or pick an option from a select menu. Very often the browser will automatically zoom in on the entire page a little when you tap the form control.
Roger Johansson wrote a great article about this way back in 2012. His solution is to make sure form controls have large enough text that the browser doesn’t feel it needs to zoom in on them. The magic size seems to be a calculated font-size of 16px.
If you don’t want to change your overall font-size to 16px or higher, you can do it on focus:
input[type="text"]:focus,
textarea:focus,
select:focus {
font-size:16px;
}If you use other text-based input types than text, add selectors as needed. And if you use ems or rems or something else, enter whatever is equivalent to 16px instead.