It has been almost a year since Safari (starting from iOS 10) disabled web developers ability to prevent user zoom.
We normally the viewport meta for granted.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
This was a bulletproof solution to make our mobile responsive pages looks the same in all mobile browsers while we ignored that many users struggled to read our hand-picked crafted fonts and our 4K display supported font size.
We had one more problem. When users tap in any form fields – the webpage zoom in automatically.
Problem
Now I know for the fact that – allowing this feature stay unchanged is recommended – sometimes we do need to honour the client request and sometimes this zoom creates unwanted bugs in the UI.
For example – a date picker input – if zoomed in mobile – would most likely break the UI.
Continue reading below for the fix.
You might be interested in:
How To Fix
By default, all mobile browsers force the form element to work as it is. But when a developer sets the font size less than 16 pixels on any form element – mobile browsers intervene and forces the UI or Page to zoom so that the texts are readable enough.
You guessed it, the solution.
Apply below
@media screen and (max-width: 767px) {
input, select, textarea {
font-size: 16px;
}
}
Please note, you can set any value for the max-width property as per your style guide or UI design.
Same, the font-size: 16px might be overridden by other higher specificity rules, like other classes, selectors etc.
It’s a good idea to use !important just in this case. You are restraining the selector only for mobile that means it won’t break your other UIs
