SEO finding
Form fields use text smaller than 16 pixels on a phone, so Safari on iPhone zooms in
SEO Warning Severity: Low
Part of the audit Mobile rendering. Finding id: seo.inputZoomOnPhone.
What it costs you
When a visitor taps the field, Safari on iPhone zooms the page in, and they have to zoom out again after typing. On a checkout or sign-up form that is one more reason to give up.
What to do
Set the font size of input, select and textarea to at least [min font px]px on small screens. Do not stop zooming with the viewport tag instead; that blocks visitors who need to zoom.
What it checks
- Form text small enough to trigger zoom
How to fix it
Give form fields 16 px text on phones
- In the site's stylesheet, set font-size: 16px (or 1rem when the root size is 16px) on input, select and textarea, at least inside the media query for small screens.
- Check the form's own stylesheet too: form plugins and embedded forms often set a smaller size.
How to check: Open [url] on an iPhone, or in a phone emulation, and tap [example]: the page does not zoom in.
Thresholds
| Name | Default | Meaning |
|---|---|---|
min_font_px | 16 | Smallest font size, in CSS pixels, of a field's text that does not make Safari on iPhone zoom in when the field gets focus. The value squirrelscan's mobile/input-zoom uses (competitors/github/squirrelscan-squirrelscan.md). Not checked against Apple's documentation. |