How to Stop Safari From Auto-Zooming on Input Fields

No more zooming, no more problems. Here’s how to prevent Safari from auto-zooming on forms on iPhone.

Published Categorized as CSS, HTML, Web & Code

If you have an input field on your website with a font size of less than 16 pixels, Safari on iPhone considers the text too small to read and automatically zooms in on the form field when the user taps on it.

While I appreciate the idea behind this feature, Google Analytics reports and Microsoft Clarity session recordings from my websites show that it also surprises and sometimes frustrates iPhone users as they don’t expect it.

So if you don’t disable it, it can have a negative impact on your form’s conversion rates (and, as a whole, your website’s engagement rates).

The question is how to do it…

Add a Viewport Meta Tag

The quickest and easiest way to stop Safari from zooming in on input fields with small text on iPhones is to add a <meta name="viewport"> tag with the following attributes and properties to your website’s <head> section:

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

Many years ago, Apple invented the viewport tag to give web developers more control over the way that their websites got rendered on iPhones. Nowadays, every browser supports the viewport tag—and having one has become the norm for usability on mobile devices.

The “viewport” is the part of the window where the content can be seen at any given moment of time. You can use the viewport meta tag to control the width and the scale of the viewport to make your website more user-friendly for users on phones.

Coincidentally, you can also use the viewport meta tag to disable Safari’s not-always-desirable auto-zoom on iPhones.

In the viewport meta tag above:

width=device-width sets the width of the page to the same as the width of the device’s screen.

initial-scale=1 sets the initial zoom of the page to 1.0 of that width, or no zoom at all.

maximum-scale=1 fixes the maximum scale of the page to 1.0. This prevents Safari from auto-zooming while still allowing the user to zoom in manually.

Change the Text Size of Input Fields

Alternatively, if you’re fine with using fixed (and not relative) font size in your CSS stylesheet, you can set the font-size property of all input fields to 16 pixels or bigger:

/* Set input fields' text size to 16px */

input {
  font-size: 16px;
}

You can also do this through CSS inheritance:

/* Set body text size to 16px */

body {
  font-size: 16px;
}

/* Set input inheritance */

input {
  font-size: inherit;
}

The two examples above apply to all input fields. If you want to style a specific input field, use one or more the following CSS attribute selectors:

  • input[type="date"]
  • input[type="datetime"]
  • input[type="month"]
  • input[type="week"]
  • input[type="time"]
  • input[type="number"]
  • input[type="range"]
  • input[type="text"]
  • input[type="url"]
  • input[type="search"]
  • input[type="email"]
  • input[type="tel"]
  • input[type="password"]
  • input[type="button"]
  • input[type="checkbox"]
  • input[type="radio"]
  • input[type="file"]

After setting the font size of these inputs to 16 pixels or bigger, you should no longer be able to observe the auto-zoom problem on Safari on iPhones.

Image courtesy of Nathana Rebouças /Unsplash

2 comments

  1. My IPhone was disabled due to Safari Zoom. The text was so large that I couldn’t even get into my phone.

Leave a comment

Your email address will not be published. Required fields are marked *