If you have an input field on your website with a font size of less than 16 pixels, Safari on iPhone considers the text too small to read and automatically zooms in on the form field when the user taps on it.
While I appreciate the idea behind this feature, Google Analytics reports and Microsoft Clarity session recordings from my websites show that it also surprises and sometimes frustrates iPhone users as they don’t expect it.
So if you don’t disable it, it can have a negative impact on your form’s conversion rates (and, as a whole, your website’s engagement rates).
The question is how to do it…
Add a Viewport Meta Tag
The quickest and easiest way to stop Safari from zooming in on input fields with small text on iPhones is to add a <meta name="viewport"> tag with the following attributes and properties to your website’s <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">Many years ago, Apple invented the viewport tag to give web developers more control over the way that their websites got rendered on iPhones. Nowadays, every browser supports the viewport tag—and having one has become the norm for usability on mobile devices.
The “viewport” is the part of the window where the content can be seen at any given moment of time. You can use the viewport meta tag to control the width and the scale of the viewport to make your website more user-friendly for users on phones.
Coincidentally, you can also use the viewport meta tag to disable Safari’s not-always-desirable auto-zoom on iPhones.
In the viewport meta tag above:
width=device-width sets the width of the page to the same as the width of the device’s screen.
initial-scale=1 sets the initial zoom of the page to 1.0 of that width, or no zoom at all.
maximum-scale=1 fixes the maximum scale of the page to 1.0. This prevents Safari from auto-zooming while still allowing the user to zoom in manually.
Change the Text Size of Input Fields
Alternatively, if you’re fine with using fixed (and not relative) font size in your CSS stylesheet, you can set the font-size property of all input fields to 16 pixels or bigger:
/* Set input fields' text size to 16px */
input {
font-size: 16px;
}You can also do this through CSS inheritance:
/* Set body text size to 16px */
body {
font-size: 16px;
}
/* Set input inheritance */
input {
font-size: inherit;
}The two examples above apply to all input fields. If you want to style a specific input field, use one or more the following CSS attribute selectors:
input[type="date"]input[type="datetime"]input[type="month"]input[type="week"]input[type="time"]input[type="number"]input[type="range"]input[type="text"]input[type="url"]input[type="search"]input[type="email"]input[type="tel"]input[type="password"]input[type="button"]input[type="checkbox"]input[type="radio"]input[type="file"]
After setting the font size of these inputs to 16 pixels or bigger, you should no longer be able to observe the auto-zoom problem on Safari on iPhones.
My IPhone was disabled due to Safari Zoom. The text was so large that I couldn’t even get into my phone.
Not a great idea for Accessibility (for people with low vision) to add “maximum-scale=1”, read more here: https://www.a11yproject.com/posts/never-use-maximum-scale/ and https://dequeuniversity.com/rules/axe/4.4/meta-viewport
André Elmoznino Laufer you are pointing to an article from 2013 that was fixed in 2019.
In current browsers user still can zoom if you don’t set user-scalable to ‘no’. ‘maximum-scale=1’ only prevents auto zoom shenanigans
Good point Maksim
You would go through the work of disabling an accessibility feature instead of making your forms better?