iPhone Safari iOS Zoom on Text Field

I was experiencing an issue where Safari on iOS iphone would zoom in on text fields as shown in the image below.

zoomed
Safari iOS on iPhone zoomed in when text field was touched.

The fix was found on Stackoverflow’s “Disable Auto Zoom in Input “Text” tag – Safari on iPhone” article as well as on Warren Chandler’s “Preventing iPhone From Zooming” article.

Put simply, you either need to update your css so that the text size is greater than 16px AND the “select:focus” is set to 16px:

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

OR update the header meta tag so it disallows the zoom entirely:

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

Afterward, the textfields no longer zoom in:

Screen Shot 2021 03 12 at 2.40.36 PM
iOS iPhone text fields no longer zoom in after the fix.

Is this helpful?

Posted in

Toby Cryns

Toby Cryns is a freelance CTO, expert WordPress developer, and teacher.

He offers free advice to improve your freelance biz.

He also publishes small droppings every now and them to https://twitter.com/tobycryns and https://twitter.com/themightymo.com

Follow Toby's contributions on Github and WP.org.