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

RSS From Toby’s Blog

  • How Digital Ocean Cost Us Thousands of Dollars in a Single Day
    Here’s the rub for me: My belief is that bad stuff happens, and you need to own it. Digital Ocean definitely did not own it in this case. I wonder how the original founders of Digital Ocean would have reacted had they been in charge… For example, wouldn’t it be nice if an actual human… […]
  • Where uncertainty exists, don’t order specific.
    4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • “Now THAT was a good meeting!”
    A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you. The post “Now THAT was a good meeting!” appeared first […]

More posts from themightymo.com

WordPress body_class() Adds Browser-Specific Classes! WOW!

By | July 18, 2009

A common problem amongst website developers is the “IE Sucks” problem.  That is, different browsers (I’m  looking at you, Internet Explorer) process CSS differently.  One way to get around these issues is to use a combination of javaScript and CSS to address the issue.  In the past, I have used this “CSS Browser” script to…

Whoa! Extra Options for wp_list_pages() Added to WordPress Recently!

By | July 13, 2009

I just realized that they added some sweet features to the wp_list_pages() funtion in WordPress 2.7. These include the ability to add html before and after menu items. I was struggling earlier today, trying to squeeze graphic dividers between dynamically-created between menu items. After trying all sorts of CSS tricks, I discovered this simple workaround…

BuddyPress Installed!

By | July 8, 2009

I completed my first BuddyPress installation today on a test server after experiencing a BIG fail trying to get it installed on a friend’s site (Sorry, Jeff!). It seems his HostGator account doesn’t like WordPress MU for some reason. But MY HostGator account likes it plenty! Below is my reaction to the installation process. Not…

RSS From Toby’s Blog

  • How Digital Ocean Cost Us Thousands of Dollars in a Single Day
    Here’s the rub for me: My belief is that bad stuff happens, and you need to own it. Digital Ocean definitely did not own it in this case. I wonder how the original founders of Digital Ocean would have reacted had they been in charge… For example, wouldn’t it be nice if an actual human… […]
  • Where uncertainty exists, don’t order specific.
    4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • “Now THAT was a good meeting!”
    A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you. The post “Now THAT was a good meeting!” appeared first […]