iOS WebKit browsers and auto-zooming form controls

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.

The intention is likely to be helpful and ensure that you can see the text you’re typing or the options in the select element. This is fine, of course. What’s annoying is that the browser doesn’t zoom back out once you’re done with the control, so you have to pinch the screen and manually zoom out. Not showstopping, but rather annoying. This behaviour seems to be the same for all browsers that use WebKit, which as far as I know means all iOS browsers except Opera Mini (which does not auto-zoom form controls).

For end users I don’t know if it is possible to avoid this, but for web developers there are a couple of ways.

One, which I do not recommend, is to remove the user’s ability to zoom in on the page. That reduces usability and accessibility in a way that’s far more annoying than having to zoom back out after interacting with form controls. Please don’t do that.

The other way 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 that seems a bit large, consider that it’s often a good idea to increase text size a little for small screens to make reading easier. I know that sounds a bit counter-intuitive, but try it.

If you don’t want to make all text 16px or larger, maybe you can at least do so for textarea, select, and the relevant states of input elements. If that isn’t an option either, 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.

For clarity I’ve used px as the font-size unit here, so if you use ems or rems or something else, enter whatever is equivalent to 16px instead.

As for how to target the browsers that are affected, I think using a media query to match a suitable device width is good enough, at least for now. As far as I know only iOS browsers auto-zoom form controls, and only on iPhones and iPods. That currently makes the iPhone 5’s 568px in landscape orientation the largest device width to target, so this should work:

@media only screen and (max-device-width:568px) {
	input[type="text"]:focus,
	textarea:focus,
	select:focus {
		font-size:16px;
	}
}

You’ll hit non-WebKit, non-iOS browsers as well, but that’s likely not a big deal. YMMV, but I’d rather do that than start browser sniffing.

Posted on December 17, 2012 in CSS, iOS