How to Stop Safari on iPhone From Zooming Into Input Fields

Safari on iPhone zooms in when you tap a form field whose text is smaller than 16px, and it doesn’t zoom back out when you leave the field. The fix that keeps zooming available to your visitors is to give inputs, selects and textareas a font size of at least 16px. Adding maximum-scale=1 to the viewport meta tag also stops the zoom, but the same tag turns off pinch-to-zoom in Chrome on Android, so use it only when you can’t change the font size.

Why does Safari on iPhone zoom into input fields?

When a field gets focus, WebKit, the engine behind Safari, works out a zoom level of 16 divided by the field’s font size, then keeps that number between the page’s minimum and maximum scale. You can see it in the _zoomToFocusRect method in WebKit’s source code. In practice:

• A field with 12px text zooms the page to 16 / 12, about 133%.
• A field with 16px text or larger works out at 100% or less, so the page doesn’t zoom.
• WebKit only does this on iPhone-sized screens. On iPad, Safari scrolls the field into view without zooming.

It happens on so many sites because form fields don’t inherit the page’s font size. WebKit’s default stylesheet for iOS sets inputs and textareas to 11px system-ui, so a field you haven’t styled is always below the limit. Other browsers have their own small defaults too: in headless Chrome, an unstyled input, select and textarea all came out at 13.33px on a page whose body text was 18px.

How do you stop the input zoom in iPhone Safari with CSS?

Give every form field a font size of 16px or more:

input,
select,
textarea {
  font-size: 16px;
}

Put the rule in your theme’s stylesheet. In WordPress, use a child theme’s style.css or the Additional CSS box, so a theme update doesn’t remove it. If your body text is already 16px or larger, font-size: inherit on the same selector works too and keeps the fields in step with your text: in the same Chrome test, fields set to inherit came out at 18px.

This keeps pinch-to-zoom working everywhere, and it’s easier to read on a small screen anyway.

What if a field still zooms?

Check the font size the field actually ends up with, not the one you wrote. Two things often undo the rule above:

• A more specific selector. A form plugin’s stylesheet with a rule like .some-form input { font-size: 14px; } beats a plain input selector, and in the Chrome test the field inside that container came out at 14px. Use a selector at least as specific as the plugin’s.
• Relative units. On a site with the common html { font-size: 62.5%; }, 1.4rem is 14px. font-size: max(16px, 1.4rem) keeps your rem value but never goes below 16px; it came out at 16px in the test.

To check a field, select it in your browser’s developer tools and read font-size on the Computed tab. If your rule doesn’t show up there at all, the browser may still be using a cached copy of your stylesheet: see fixing CSS that isn’t updating in the browser. To inspect the page on an actual iPhone, connect it to a Mac and use Safari’s Web Inspector.

How does the viewport meta tag stop the zoom?

If you can’t change the font size, you can cap the zoom in the viewport meta tag instead. Replace the existing tag in the <head> with this one, and make sure the page ends up with only one viewport tag:

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

• width=device-width, initial-scale=1 sizes the page to the screen at 100%, the standard setting for responsive sites.
• maximum-scale=1 sets 100% as the page’s maximum scale, and WebKit won’t zoom a focused field past it.

In a classic WordPress theme the tag is in header.php; edit it in a child theme so updates don’t overwrite it. Block themes have no header.php: WordPress prints width=device-width, initial-scale=1 itself, which is one more reason to use the CSS fix there.

Why doesn’t this block pinch-to-zoom on iPhone?

Since iOS 10, Safari lets people pinch-zoom every page and ignores maximum-scale, minimum-scale and user-scalable for that, as WebKit explained in New Interaction Behaviors in iOS 10. The zoom on focus is handled separately. WebKit still limits it to the page’s own maximum-scale, because, in the words of a comment in its source, zooming above the page’s default scale “should only happen when the user performs it”. So on an iPhone, maximum-scale=1 stops the automatic zoom and leaves pinch-to-zoom working.

What does it cost in other browsers?

Every other browser gets the same tag and may follow it. In a test in headless Chrome 153 with a phone-sized mobile viewport, a simulated pinch to 200% gave these results:

• width=device-width, initial-scale=1: the page zoomed to 200%.
• The same tag with maximum-scale=1: the page stayed at 100%.
• The same tag with user-scalable=no: the page stayed at 100%.

Chrome on Android has a Force enable zoom option under Settings > Accessibility for pages like this, but each visitor has to find and turn it on. Lighthouse’s accessibility audit also fails both tags, reporting that user-scalable="no" is used or maximum-scale is less than 5, because blocking zoom shuts out people with low vision who rely on it.

An earlier version of this post used width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0. You don’t need the last two values. user-scalable=0 adds nothing on iPhone, since maximum-scale=1 already stops the focus zoom, and it blocks pinch-to-zoom in other browsers. shrink-to-fit=no was a workaround for Safari on iOS 9, and it hasn’t been needed since iOS 9.3.

Which fix should you use for input zoom in Safari on iPhone?

Use the 16px font size. It stops the zoom on iPhone, keeps zoom working in every browser, and passes Lighthouse. Keep the viewport approach for pages where you truly can’t change the field styles, and add only maximum-scale=1, never user-scalable=no.

For background and other approaches, see the viewport meta tag reference on MDN and this Stack Overflow discussion.

Related articles

• HTML5 video that won’t autoplay on iPhone: another Safari-on-iPhone behavior and its fix
• making a mobile dropdown’s parent item tappable: another mobile usability fix in CSS