iPhone input zoom

How To Prevent iPhone/iOS Devices From Zooming on Input Forms

One of the new features(quirks) that Apple had currently implemented in iOS was the page zooming on input form fields when a user taps or focuses on the input field itself. The whole purpose for this was to help alleviate the strain of small font sizes on mobile screens, thus allowing the screen to zoom in on input fields at a comfortable reading size of 16px.

This tutorial will show you how to prevent the page zoom effect while also allowing you to keep your input field font-size.

Update: Oct 14, 2014

It has been confirmed that this no longer works for iOS 8.0+. The only solution is to apply a restriction to zoom in the viewport. However, please be warned, this will also disable zoom functionality to your page.

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

 

First, let’s create a webpage with a simple input text field.

[HTML]
< !DOCTYPE html>

How To Prevent iPhone/iOS Devices From Zooming on Input Forms


[/HTML]

And let’s just include some styling to spruce up this dull page.

[CSS]
*, *:before, *:after {
margin:0;
padding:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: ‘Helvetica Neue’,arial, sans-serif;
background: #0086B2;
}
.content {
width: 100%;
margin: 80px auto;
padding: 0 20px;
}
input[type=”text”]{
width: 100%;
height: 30px;
padding: 8px 5px;
border: 1px solid #fff;
border-radius: 4px;
}
[/CSS]

Here’s a preview of what it should look like on an iPhone so far.

iPhone input zoom

You’ll notice that when you click on the input field, iOS automatically zooms in on it and allows you to type inside the input.

Now this may be an okay experience to allow users to clearly see what they’re typing, but it also could lead to a few headaches since the window screen is now zoomed in, even after you have finished typing. With some simple CSS, we can easily design our input text fields to prevent iOS from zooming in once the user focuses on the input.

In your CSS, all you need to do to prevent iOS from zooming in is to add some properties to the input text field for on :focus. Look at the example below:

[CSS]
input[type=”text”]:focus{
font-size: 16px; /* Adding 16px on focus will prevent page zoom */
}
[/CSS]

You’ll notice that on :focus, we change the font-size to 16px which is the default value for readable text for inputs on iOS devices. Adding this prevents the page zoom because iOS will recognize that the font-size for the input is already at a readable/comfortable size.

Here’s how it will look like after you add the extra on :focus properties.

iPhone input zoom after

You’ll now notice that the page no longer zooms in on the input field but instead only increases the font-size inside that text input. Try it out for yourself.

3 thoughts on “How To Prevent iPhone/iOS Devices From Zooming on Input Forms

  1. Add a :hover and it will work in iOS8.

    input[type=”text”]:focus, input[type=”text”]:hover {
    font-size: 16px; /* Adding 16px on focus/hover will prevent page zoom */
    }

  2. @ Bart, This works, but for select dropdown, after clicking we get up and down arrow for list items. when you click on that arrows, page zooms again.

Leave a Reply

Your email address will not be published. Required fields are marked *