When focusing a mobile input zooms the page
Small editable text can trigger iPhone focus zoom. Use a computed input font size of at least 16px before focus, keep pinch zoom available, and distinguish device behavior from desktop browser emulation.
Read MarkdownUpdated 2026-10-15 When to use this lesson
- Tapping a text input enlarges the page on a phone.
- The browser stays zoomed after dismissing the keyboard.
- A compact form uses text smaller than 16px.
What happened
A user reported a small unwanted zoom when tapping an invitation-code field on a phone. The field inherited a 14px font from the document. The report did not identify the phone model or browser; the CSS finding matches a known iPhone WebKit behavior.
Diagnosis and approach
WebKit implements focus zoom in _zoomToFocusRect. In the non-watchOS branch, when scaling is allowed, its reference font size is 16 and the candidate scale is 16 divided by the focused font size, clamped by scale limits. A 14px field can therefore request enlargement at the default scale. This is browser readability behavior, not necessarily an application animation.
Primary source: WebKit focus-zoom implementation. The cited commit is an audited source snapshot, not a claim that this commit introduced the threshold.
What did not work
The inspected page already had width=device-width and initial-scale=1, but its editable input inherited 14px. No JavaScript zoom-reset or zoom-disabling workaround was deployed. Such workarounds were rejected during diagnosis, not tested as failed experiments.
What changed
Set the editable input font size explicitly before focus, rather than inheriting compact body typography:
input {
font-size: 16px;
}
Apply the same minimum to editable selects or textareas when those controls exist. Use a larger size where the design calls for it. Keep labels and buttons independently sized. A non-editable file picker can retain its own control styling.
Retain an accessible viewport:
<meta name="viewport" content="width=device-width,initial-scale=1">
Do not solve the symptom by disabling user scaling. WebKit explains why pinch zoom is important for accessibility. Update any design-system input preview so a later restyle does not restore the small font.
How to verify the improvement
Performed: Chromium browser checks at 320px, 390px and 1440px verified computed input text is 16px both before and after focus, typing works, the page does not overflow horizontally, and viewport metadata does not restrict zoom. The existing application tests and production build passed.
Device verification: on the affected phone at default page zoom, tap the code field, type, dismiss the keyboard and repeat. The page should not magnify to compensate for small input text. Confirm manual pinch zoom still works and controls remain visible above the keyboard. Inspect visualViewport.scale before and after focus if remote debugging is available.
A mobile viewport or device preset in desktop Chromium does not reproduce the native iOS keyboard/focus-zoom implementation, so it cannot prove the physical-device result.
What to do next time
Editable text must be legible before focus. Inspect computed input font size and inherited typography before adding viewport limits or JavaScript zoom resets. Preserve manual pinch zoom.
Limits and exceptions
The 16px reference is implementation evidence from WebKit, not a universal web standard or a guarantee for every browser, user text-size setting, page-zoom preference, transform or embedded webview. Normal scrolling to keep a field visible above the keyboard is distinct from magnification and can still occur. No physical iPhone was available during this change. This article uses public upstream evidence and contains no private repository content.
Commit evidence
- WebKit/WebKit@b4363b9: Audited public WebKit source snapshot: WKWebViewIOS.mm contains the 16px focus-zoom reference and font-size-dependent scale calculation.
Based on the linked commits. Verification describes checks to perform, not a claim that tests were executed. Confirm applicability in your own project.