So you’ve you created an awesome responsive design for your website or web app, which looks great on any device, from mobiles to tablets to desktops and perhaps even TV’s. You’ve used an appropriate viewport meta tags to make sure the design fits on the screen of any device, and everything works great.
<meta name='viewport' content='width=device-width, initial-scale=1.0' >
That’s until the mobile/tablet user taps an input field. The keyboard comes up, the page zooms in, the content gets cuts off… Well. We don’t want that.
The user can now accidentally pan around, and need to know how to un-zoom to get back to seeing the whole page at once. Of course, this mechanism is well intended, to make sure users can see what the’re typing on non responsive web sites, where the input fields would be extremely tiny. However, if you have designed things properly, it shouldn’t be needed on your site.
The kind of bad fix
The easiest way to prevent the zoom from happening is to disallow zoom all together for mobile devices, by specifying user-scalable=0 in the viewport meta tag, like so:
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0' >
However, there could be reasons why the user would want to zoom in, such as seeing the details on an image, so I would not recommend this approach. (Although I did read recently that some latest version of Chrome now does this automatically, for web apps I think? I’ll add a link when I find it again).
The proper solution to prevent zoom in
As I mentioned before, the (mobile) browser zooms in order to make input text larger so the user can read it. If you set your text to be large enough to begin with, the browser never needs to do so! In my tests, the magic limit seems to be 16px. Setting the font-size to this for all your input fields should stop the zoom in from happening.
input {
font-size: 16px;
}
Be aware though that this solution might need some tweaking and testing to work in every case. While 16px never let me down for any iOS device (iPods, iPhones, Ipads), it did still produce a zoom-in when using a Google Web Font on the Nexus 7 (android) device. I bumped the font-size up slightly more in this case, and the zoom-in disappeared.
Two last quick points: This example is oversimplified. Don’t use px to set font-sizes, use em, rem, or another more responsive typography sizing solution. Also, be aware that the default font-size in input fields in desktop browsers is closer to 13px, so if you apply this font-size bump globally, your input text size might increase quite a lot on desktops. This might not be a bad thing.
That’s all, that’s how I prevent zoom-in’s on input fields in my designs! If you have a question or perhaps even a better technique, please let me know!