Here’s the scenario: you’ve got a mobile or responsive design on your site. Your page fits within the browser viewport at 100% zoom and text is easily readable without zooming. A user selects an input field and the browser zooms in anyway, sometimes obscuring labels or other useful information above or below the field.
Possible solutions
One solution that some developers turn to is to disable page zooming in the meta viewport using user-scalable=no. However, this is detrimental to any users who may want to zoom for closer detail elsewhere. As much as humanly possible, never take away the user’s ability to zoom.
Want a better solution? Set the font-size for your inputs to a minimum of 16px (or larger).
input { font-size: 16px; }
You can also be more specific and only apply the font-size to the input types with a text field like so:
input[type="text"], input[type="password"], input[type="date"],
input[type="datetime"], input[type="datetime-local"], input[type="month"],
input[type="week"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"],
input[type="url"], textarea
{ font-size: 16px; }
Want to see how that one change helps?
Why does this work?
Whether you agree or disagree, Apple decided that form input on iOS needed to be a comfortable reading size, set at a minimum of 16px. If your form field font-size is less than that, they will automatically zoom into the field until the text appears at that size.