Preventing iPhone Form Zooming

Keeping up with browser functionality as a website programmer can be an arduous task, but when the operating system also contributes to the mess there’s often nothing that can be done. Recently a client asked if it was possible to prevent iOS zooming in on the input fields of their website. They’d been told it wasn’t possible due to it being an iOS problem, but fortunately a solution (or three) is available.

In layman’s terms the issue itself is that when you click on an input or select field the default view zooms in so a full width field transforms itself as per the image below.  You will notice you can no longer see the full field and this becomes a problem if there are placeholders or descriptions alongside the fields.

 

 

Three Possible Solutions to iPhone Input Field Zooming

Using Meta Tags to Prevent Form Zooming

The first method in which to prevent form input zooming is to add a meta tag (or edit the existing one) in your site’s header area. Add the following meta tag and the zooming is prevented via a maximum scale directive. This is the correct way to do things if you want to disable zoom entirely, but sometimes plugins (mainly SEO related ones) and the like can overwrite this, and you may not want to disable the zoom feature.

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

If this still doesn’t work for you, it’s possible that it’s being overwritten programmatically, but there may be another simple fix that does the job.

Simple CSS to Fix Form Zooming

Using CSS, simply set your BODY font size to 16px, and then use CSS again to set the INPUT and SELECT field font size to 1em OR 100%. For example;

body { font-size: 16px; }
input, select { font-size: 100%; }

Advanced iPhone CSS Fix for Form Input Zooming

Here’s where things get a little more complicated if you want them to. The following CSS caters for each and every iPhone (since this is where the problem originates from), and is scaled to fit each specific device.

/*** iPhone and iOS Form Input Zoom Fixes ***/
/* Fix Input Zoom on devices older than iPhone 5: */
@media screen and (device-aspect-ratio: 2/3) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7  */
@media screen and (device-aspect-ratio: 375/667) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"], 
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max  */
@media screen and (device-aspect-ratio: 9/16) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}