Why my contact form zoomed in on iPhone, and the one-line fix

I was testing my portfolio on my iPhone 15 Pro Max. I filled in the contact form, hit send, and the whole page felt off. It had zoomed in, just enough that the layout no longer fit the screen, and it stayed that way after the form was gone.

Nothing was broken in the code. This is iOS Safari working as designed.

The cause: text under 16px

When you tap into an input, textarea or select, iOS Safari checks the field’s font size. If it’s under 16px, Safari zooms the page in so the text is easier to read while you type. When the keyboard goes away, it doesn’t zoom back out. You’re left on a zoomed-in page until you pinch it back yourself.

My fields didn’t set a size of their own. They used font: inherit, and the body text on the site is 14px:

body {
  font-size: 14px;
}

input,
textarea {
  font: inherit; // 14px, so iOS zooms in on focus
}

Two pixels short.

The fix

Give form fields at least 16px:

input,
textarea {
  font: inherit;
  font-size: 16px; // below 16px iOS Safari zooms in on focus
}

That’s the whole fix. Safari no longer zooms when the field gets focus, so there’s nothing to get stuck. The fields are a little bigger on desktop too, which makes them easier to read anyway.

I also close the keyboard as soon as the form is sent. On my site, sending the form plays a short animation (the message is folded into a bottle and thrown into the river), and I want that in full view, not half-covered by a keyboard:

function submit() {
  // ...validate the fields...
  document.activeElement?.blur() // close the phone keyboard
  // ...send and play the animation...
}

The fix I didn’t use

Search for this problem and the most common answer is to change the viewport tag:

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

It does stop the zoom on iPhone. But maximum-scale=1 is a blunt tool. In other browsers, like Chrome on Android, it also stops people from pinch-zooming the page at all. That’s a real problem for anyone who needs to zoom in to read. Fixing a layout annoyance for some people by taking away an accessibility feature from others isn’t a good trade, especially when one CSS line fixes the cause.

Takeaways

• Keep text in form fields at 16px or larger. Treat it as a minimum, like a tap target size.
• font: inherit is handy, but check what it actually inherits.
• Test on a real phone. A narrow desktop browser window won’t show you this. Only iOS Safari does it.