Tap a small input on an iPhone and the page suddenly enlarges. The field is readable now, but the surrounding layout shifts out of view and often stays zoomed after the keyboard closes.
That happened on a public chat field whose computed font size was 14px. The page was responsive until the exact moment somebody tried to use it.
On iOS Safari, using a computed input font size of at least 16px avoids this focus-zoom behavior in the common case:
<input className="text-base min-h-11" />
In Tailwind's default scale, text-base is 1rem and min-h-11 is 44px. If the project customizes either scale or the root font size, inspect the computed CSS instead of trusting the class name.
Do not disable the user's zoom
This viewport setting is not the fix:
<meta name="viewport" content="width=device-width, maximum-scale=1" />
Preventing pinch zoom takes control away from people who need magnification and can violate accessibility expectations. Keep a normal responsive viewport and make the input readable at its initial scale.
Font size and target size solve different problems
The 16px font addresses Safari's focus behavior. The control's height and spacing address touch accuracy. A 44px target is a strong mobile default and aligns with WCAG's enhanced target-size criterion. WCAG 2.2 Level AA sets a 24-by-24 CSS-pixel minimum with defined exceptions; 44px is not the universal AA minimum.
Do not shrink the actual input and wrap it in a tall decorative container. The interactive target must receive the height and padding.
.mobile-field {
min-height: 44px;
padding: 10px 12px;
font-size: 16px;
line-height: 1.25;
}
Also check select and textarea, search fields, newsletter forms, checkout controls, and inputs inside embedded widgets. A dense desktop dashboard may intentionally use smaller text, but any field reachable on a phone needs a mobile rule.
Test the interaction, not the screenshot
A static responsive screenshot cannot reproduce focus zoom or the on-screen keyboard. Test on a real iPhone or a reliable device lab: focus each field, type, move to the next field, dismiss the keyboard, and verify that context remains visible at 100% layout scale.
The original field passed every desktop review. Its failure only existed in the reader's first tap—which is exactly where form quality begins.