Why iPhone zooms in on your form (and the 16px fix)

Safari on iPhone zooms in whenever someone taps a form field whose text is smaller than 16px, and it stays zoomed in after they leave the field. The fix is one CSS rule: give inputs, selects and textareas a font size of at least 16px, for example font-size: max(16px, 1em), or Tailwind's text-base. Don't fix it with maximum-scale=1 or user-scalable=no in the viewport tag; that trades a small annoyance for a real accessibility problem.

What your iPhone is doing

When a field gets focus, Safari scrolls it into view and, if the text is small, zooms in so the visitor can read what they type. The rule is right there in WebKit's source code (WKWebViewIOS.mm): a constant called webViewStandardFontSize set to 16, and a zoom level of 16 divided by the field's font size, kept within the page's minimum and maximum zoom.

So the zoom is proportional to how far under 16px you are:

Even a 15px field triggers it. A few more details from WebKit's iOS code:

• iPhone only. The zoom only runs on small-screen devices, so iPads scroll the field into view but don't zoom.
• Other iPhone browsers too. It's WebKit code, and Chrome, Firefox and in-app browsers on iPhone generally run on WebKit, so they zoom as well.
• It doesn't zoom back. Nothing resets the zoom when the field loses focus, so the visitor carries on with a magnified page, half of it off-screen, until they pinch back out.
• Upright and sideways. Orientation doesn't matter, which catches out one popular component kit (below).

Why your fields are under 16px

Nobody sets out to make form text small. It happens like this:

• Tailwind text-sm on inputs. text-sm is 0.875rem, which is 14px. AI tools love it for "clean" forms. text-xs (12px) is worse.
• shadcn/ui's Input and Textarea, which many AI builders generate, use text-base md:text-sm in the default style: 16px below 768px, 14px from md up. (Its newer Lyra and Mira styles go smaller, 12–14px even upright.) Held upright, a phone is far narrower than 768px, so no zoom. But turn the big iPhones on their side and they're well past 768 (an iPhone 17 Pro Max is 956px across), so md:text-sm kicks in and the zoom is back in landscape. Landscape on phones explains why phones on their side get your md styles.
• Bootstrap's small controls. .form-control is 1rem, fine. .form-control-sm and .form-select-sm are 0.875rem, 14px.
• A design system with 14px or 15px form text, often copied from a desktop mockup.
• Inheritance. CSS resets, including Tailwind's Preflight, set form fields to font: inherit, so a form inside a text-sm card inherits 14px without anyone writing it on the field.
• A shrunken root font size. html { font-size: 62.5% } or html { font-size: 14px } makes every rem value smaller, including Tailwind's text-base, which is 1rem. Check the computed size, not the class name.

The fix

Give every form field at least 16px:

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

max() picks the larger value. 1em here means the font size of the field's surroundings, so a field inside a large heading-style form grows with it, and nothing ever drops below 16px. max(16px, 1rem) works too, keyed to the root size instead. Either way it's one rule, and people can still pinch-zoom whenever they like.

If 16px text makes your fields look chunky, change their padding and height, not the font size. A 40px-tall field with 16px text looks as neat as a 36px one with 14px.

Tailwind

Use text-base (16px) on fields instead of text-sm:

<input type="email" class="w-full rounded-md border px-3 py-2 text-base" placeholder="you@example.com">

If you use shadcn/ui, open components/ui/input.tsx and textarea.tsx and either delete md:text-sm or, in Tailwind v4, change it to pointer-fine:text-sm. That variant applies only on devices with a precise pointer such as a mouse, so desktops keep the 14px look and touch screens keep 16px in both orientations.

For a safety net that catches stray classes, add the rule above to your main CSS file outside any @layer. In Tailwind v4, utilities live in a cascade layer, and plain CSS outside a layer wins over anything inside one, so a forgotten text-sm on a field can't undo it. It also overrides larger sizes set with classes, so give deliberately big fields their own rule. (In Tailwind v3 a class like .text-sm beats a plain input rule on specificity, so fix the classes there.)

Why maximum-scale=1 is the wrong fix

The fix you'll find all over forums, and the one AI tools reach for, is this:

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

On iPhone it does stop the input zoom: WebKit keeps the focus zoom within your page's maximum, so a maximum of 1 means no zoom. And since iOS 10, Safari ignores maximum-scale and user-scalable=no for pinch-zoom (MDN), so iPhone users can still pinch. That's why it looks harmless.

It isn't, for three reasons:

1. Other browsers take it literally. Chrome on Android honours maximum-scale=1 and user-scalable=no unless the user has switched on its "Force enable zoom" accessibility setting. Your fix for an iPhone annoyance stops Android users with low vision from zooming at all.
2. It fails accessibility checks. WCAG's Resize Text criterion expects text to be resizable to 200%, and the axe rule that Lighthouse runs, "Zooming and scaling must not be disabled", flags both settings.
3. It hides the real problem. The zoom is iOS telling you the text is too small to read comfortably. Fix the text, and the zoom goes away on its own.

JavaScript tricks that add maximum-scale=1 while a field has focus and remove it afterwards have the same problems, plus a flicker. The viewport tag you actually want is in The meta viewport tag.

Check your forms

Paste this into the browser console on any page with a form. It lists every field whose text is under 16px at the current window size:

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

Run it twice, because breakpoints can change font sizes: once with the window about 400px wide, and once at 956px, an iPhone 17 Pro Max on its side. No output means no zoom.

Then confirm on a real iPhone: tap every field, upright and sideways, including the search box in your header and the email field in your footer. How to open localhost on your phone gets your dev build onto it, and if you're on Windows, testing on an iPhone from Windows covers the options.

doesitfit can help with the layout side, not this particular zoom: previews run in your own computer's browser engine, so Safari's focus zoom won't happen there. What it does show is which layout each iPhone gets, upright and with Rotate, which tells you whether md: classes (and a sneaky md:text-sm) apply on a phone on its side.

A prompt for your AI tool

iPhone Safari zooms into my form fields when they're tapped because their font size is under 16px. Find every input, select, textarea and contenteditable element (including search boxes, newsletter forms and components like shadcn/ui's Input and Textarea) and make sure its computed font size is at least 16px at every screen width, including phones on their side, which are often 768px or wider. In Tailwind, replace text-sm/text-xs on fields with text-base, and replace md:text-sm with pointer-fine:text-sm (Tailwind v4) or remove it. In plain CSS, add input, select, textarea { font-size: max(16px, 1em); }. If the root font size is set below 16px, tell me. Remove maximum-scale and user-scalable=no from the viewport meta tag if present. Adjust padding if the fields now look too big. Show me each change.

The takeaway

• Safari on iPhone zooms into focused form fields with text under 16px, by 16 ÷ your font size, and doesn't zoom back out.
• Set inputs, selects and textareas to at least 16px: font-size: max(16px, 1em), or text-base in Tailwind.
• Watch md:text-sm: phones on their side are wide enough to trigger it.
• Never block zoom to fix it. maximum-scale=1 hides the symptom on iPhone and locks Android users out of pinch-zoom.
• Check computed sizes with the console snippet, then tap every field on a real iPhone.