AMPEDUPDESIGNS

CONSULTING CONCEPTS PERSONAL

Prevent iOS Zoom on Text Input Fields

April 29th, 2013

Whenever a user clicks on a html input text field of a web page in iOS, Safari has an annoying little habit of zooming in (albeit slightly) while the soft keyboard comes up.  When a user dismissed the soft keyboard, the browser stays zoomed requiring the user to zoom-out again.  It seems like a slight overlook on Apple's part.   So how do you disable this behavior?

The "proper" way:

Prevent zooming all together by adding this meta tag to your head:  

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>  

 

This essentially tells the mobile browser to keep the same width scale and locks the user from doing any zooming at all, hence also disables that annoying behavior.

 

The quick CSS hack:

So you want to allow the user to still zoom in on the page? Well, there is this quick CSS hack instead: 

input[type="text"], input[type="password"], input[type="phone"],  textarea {
        font-size:16px;
}

 

By setting the font-size of the input field to a font-size of 16px (or larger), this seems to prevents the browser from zooming on focus.  It's a little dirty css hack that gets around this annoying behavior on iOS devices.

 

Now the caveat is that this seems to only work on html input fields.  HTML <select> fields seem to be immune from this hack.  So if you do know how to do something similar for select fields, let me know!



Popular Posts