If you use the most common HTML viewport meta settings, clicking on an input element will automatically trigger auto zoom on iOS devices. At least on Smartphones. I’ve tested this on iPhone 4, 5 and 6, using the Safari and Chrome browser. Based on my research it’s the same for all iOS devices.
This HTML code is what allows the auto zoom effect to happen:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />But this auto zoom effect is far from always desirable. Sometimes it will hurt the usability of your web app. It totally depends on the context.
To disable this effect on both Safari and Chrome, you can use the following instead:
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>The only new code is that we added the value maximum-scale=1 to the meta content attribute.
Important
This does not disable the option of manually zooming in and out, in Safari. It only disables the auto zoom function.
But in Chrome’s mobile browser (on iOS devices), it does disable the manual zoom option. This might be a problem, depending on your use case.
I haven’t found a pure HTML solution yet that allows you to keep the manual zoom in Chrome. If I do I’ll update this article.
A much simpler solution
If you give your input elements a minimum font size of 16px, as opposed to the default 11px, this will remove the auto zoom effect on both Safari and Chrome. At least it did in my tests.
With this method, you can avoid adding the maximum-scale-1 value to your content attribute and thus avoid restricting manual zoom in Chrome
Wait, why didn’t you suggest this solution first?
Well, you might not want to use a 16px font size on all your input fields on mobile. This will force you to adapt your mobile UI’s typography to accommodate your input fields.
And as with pretty much anything, this issue can be worked around programmatically by using JavaScript, but that’s beyond the scope of this article.
Also, beware that restricting your users from zooming is in general not adviced. More info at W3Schools. But again, it depends on the context.
It would be nice if there was a simple setting that could address this issue across all devices at once. If you have any insight on this topic, feel free to let me know in the comments section below :-)
