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.

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:

iOS iPhone text fields no longer zoom in after the fix.

Is this helpful?

Posted in

Toby Cryns

RSS From Toby’s Blog

  • The Horrors of Covering Your Own Ass
    Today I emailed a very simple question to support@[companyname].com (2 sentences total). The automated response I got back was this: Keep in mind that the above was an auto-response and: It’s hard to read. Everything has the same import (e.g. none of it is important enough to call out separately). It’s long. It added absolutely-zero…
  • If something stupid makes money, then it’s not stupid.
    I’ve seen some stupid things in my life…And some of them were really really smart. I remember a story from decades ago where the U.S. military was looking to equip the Stealth Bomber with a fancy computer-driven video system so the pilots could see behind them. Well, the computers failed to get the job done,…
  • There is no destination.
    Coding is a process of failure followed by a moment of great joy. You've gotta ride through the failures to experience the joy...

More posts from themightymo.com

Website DNS, Domain Registration, & Hosting Basics

By Toby Cryns | November 30, 2021

Websites have multiple layers: Domain Registration When you register a domain, you pay someone ~$20/year for a .com domain. Registration means you are leasing the domain for a year or more. A domain is the “yoursite.com” or “yoururl.net” or “yourorganization.org” that people type into their browser. We use services like Namecheap, Dreamhost, and GoDaddy for…

Avada ThemeFusion loads 80+ javascript files on every page! DON’T RECOMMEND!

By The Mighty Mo! Design Co. | November 18, 2021

I inherited a WordPress site using Avada ThemeFusion, and it is experiencing really bad performance issues. After doing lots of my standard bag-of-tricks optimizations to little effect, I decided to simply count the javascript files. To my surprise horror, I found it was loading over 80 javascript files on every single page! (For comparison: themightymo.com…

Why I switched from WPMUDEV’s Defender Pro to WordFence for WordPress Security

By The Mighty Mo! Design Co. | November 12, 2021

A while back, I started using WPMUDEV’s Defender Pro plugin for security on all my WordPress sites. I made a decision this week to switch to WordFence. The conversation was forced on me, because I had a site using Defender Pro that was hacked. I do not blame Defender Pro for the hack, however, this…

RSS From Toby’s Blog

  • The Horrors of Covering Your Own Ass
    Today I emailed a very simple question to support@[companyname].com (2 sentences total). The automated response I got back was this: Keep in mind that the above was an auto-response and: It’s hard to read. Everything has the same import (e.g. none of it is important enough to call out separately). It’s long. It added absolutely-zero…
  • If something stupid makes money, then it’s not stupid.
    I’ve seen some stupid things in my life…And some of them were really really smart. I remember a story from decades ago where the U.S. military was looking to equip the Stealth Bomber with a fancy computer-driven video system so the pilots could see behind them. Well, the computers failed to get the job done,…
  • There is no destination.
    Coding is a process of failure followed by a moment of great joy. You've gotta ride through the failures to experience the joy...