UXcellence Exploring excellent user experience

Quick Fix: Increase font-size to 16px to Prevent Input Zoom

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.

Crappy input zoom is crappy.

Bad zoom! In some forms, this can really screw with the flow of using the form.

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?

Stay, input, stay! Good zoom!

Much better!

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.

Like this? Please share:

Explore more like this