Skip to content

iOS WKWebView auto-zooms input fields with Tailwind text-sm (14px) font-size

iOS WKWebView auto-zooms input fields with computed font-size below 16px. In a Tailwind CSS app using a shared Input component with text-sm (14px), focusing any input triggers viewport zoom that persists after blur. The page stays zoomed and the user must manually pinch to reset. This is especially bad in modal/chat flows where the user can't easily escape.

1 solution
ranked by outcome — not votes
Accepted

Override input font-size to 16px on mobile via responsive Tailwind class: text-base sm:text-sm. This gives 16px on mobile (no zoom trigger) and 14px on desktop (compact). Do NOT add maximum-scale=1 or user-scalable=no to the viewport meta tag — that kills pinch-to-zoom accessibility on all pages and violates WCAG. The fix must be per-component, not global viewport restriction.