How to stop iPhone Safari zooming in on input focus (without breaking pinch zoom)

Short answer: iPhone Safari zooms in when a focused field’s text is smaller than 16px. Give input, textarea and select a computed font size of at least 16px and the zoom goes away. Don’t reach for maximum-scale=1 in the viewport meta tag: it works on iPhone, but on Android it disables pinch zoom for everyone.

Why Safari zooms

When someone taps a field with small text, Safari zooms the page so what they type is readable. The rule is mechanical: a computed font size under 16px on the focused element. At 16px nothing happens. At 15px, or 15.75px, the page zooms.

Two details make it worse than it sounds:

• It doesn’t zoom back out. When the user leaves the field the page stays zoomed, the layout looks broken, and they have to pinch to recover.
• It’s every iPhone browser. Chrome and Firefox on iOS run on WebKit, Safari’s engine, so they zoom too. So does your installed PWA.

The CSS fix

input,
textarea,
select {
  font-size: max(16px, 1em);
}

max() sets a 16px floor and still lets the field grow with surrounding text when that’s larger. Then check the cases that usually slip through:

• Rich text editors and contenteditable. Safari treats an editable element like a field. Apply the same floor there.
• html { font-size: 62.5% }. With that trick, 1rem is 10px, and a field at 1.4rem computes to 14px.
• Fluid type with clamp() or vw. On a narrow screen the computed size can land at 15.8px. Safari looks at the computed value, not what your stylesheet says.
• Tailwind. text-sm is 14px. Use text-base on phones and shrink only on larger screens: class="text-base md:text-sm".

If the design calls for fields that look like 14px, the honest answer is a 16px field on phones. Shrinking the text afterwards with transform: scale() works, but it fights you on width, caret position and selection.

The fix that breaks something else

The most copied answer changes the viewport meta tag:

<!-- don't do this -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

On iPhone it stops the auto zoom, and Safari still lets people pinch. On Android, Chrome honors maximum-scale and blocks pinch zoom. People with low vision lose the one way they had to enlarge text, and the page fails WCAG success criterion 1.4.4 (Resize text). user-scalable=no has the same problem.

Two other popular fixes that don’t touch this bug:

• -webkit-text-size-adjust: 100% controls text inflation when the phone rotates, not focus zoom.
• touch-action: manipulation removes double-tap zoom, not focus zoom.

Find every small field

Open the page at a phone width and run this in the console:

[...document.querySelectorAll('input, textarea, select, [contenteditable]')]
  .map((el) => [el, parseFloat(getComputedStyle(el).fontSize)])
  .filter(([, size]) => size < 16);

You get each field under 16px with its computed size. Run it at phone width because media queries change font sizes: a field can be 16px on desktop and 14px on a phone.

How to test the zoom itself

Focus zoom is iOS behavior, so only real Safari shows it: an iPhone, or the Xcode Simulator on a Mac. Chrome’s device mode doesn’t zoom, and neither does Breakpane, which runs Chromium.

What Breakpane does is find the cause. With coding agents turned on, ask Claude Code, Cursor or Codex to audit the page. The audit flags every field below 16px (with its computed size) and any viewport meta tag that blocks zoom, across all open devices at once. After the fix, confirm once on an iPhone. No Mac? See how to test a website on iPhone without a Mac.

Checklist

• Every input, textarea, select and contenteditable computes to 16px or more at phone width.
• Viewport meta tag without maximum-scale or user-scalable=no.
• Checked on an iPhone or the Simulator: tapping a field doesn’t zoom the page.