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

  • Dumping Paper Checks 3x’d My Profit
    Your paper check-based billing is costing you more than you think. The post Dumping Paper Checks 3x’d My Profit appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • How We Use Basecamp
    Managing projects can be a headache. Basecamp doesn't solve the human problems, but it's features can empower you to do better work and launch that next project on time! The post How We Use Basecamp appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • An Alternative to Elon Musk
    As I drudge myself out of bed for yet another war with monotony, a battle with my fat-old-man eating habits, a valiant clash with against my child's militant stand against doing their homework, and an overall feeling of blech due to our country's unsteady Coronovirus response, I discovered this article and quote lionizing a quote […]

More posts from themightymo.com

iPhone Safari iOS Zoom on Text Field

By Toby Cryns | March 12, 2021

Sometimes iPhone iOS Safari zooms in on text fields unexpectedly – here’s how to disable that zoom effect.

How to fix the “include_once” warning when migrating WordPress site away from Flywheel

By Toby Cryns | March 3, 2021

After migrating away from Flywheel this morning, I received this error: Warning: include_once(…): failed to open stream: No such file or directory in … on line 292. The simple way to fix this is to edit the wp-settings.php file on the server and delete line #292. That’s it!

How to Unzip .bz2 File via Command Line

By Toby Cryns | February 22, 2021

To unzip a .bz2 file via the command line, “cd” to the directory, then type: That’s it!

RSS From Toby’s Blog

  • Dumping Paper Checks 3x’d My Profit
    Your paper check-based billing is costing you more than you think. The post Dumping Paper Checks 3x’d My Profit appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • How We Use Basecamp
    Managing projects can be a headache. Basecamp doesn't solve the human problems, but it's features can empower you to do better work and launch that next project on time! The post How We Use Basecamp appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • An Alternative to Elon Musk
    As I drudge myself out of bed for yet another war with monotony, a battle with my fat-old-man eating habits, a valiant clash with against my child's militant stand against doing their homework, and an overall feeling of blech due to our country's unsteady Coronovirus response, I discovered this article and quote lionizing a quote […]