How to stop zoom in on input focus on mobile devices
It has been almost a year since Safari (starting from iOS 10) disabled web developers’ ability to prevent user zoom.
We usually the viewport meta for granted.
This solution was a bulletproof solution to make our mobile-responsive pages look the same in all mobile browsers. At the same time, 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.
I know for a fact that allowing this feature to stay unchanged is recommended. Sometimes we do require to honor the client request, and this zoom creates unwanted bugs in the user interface.
For example — a date picker input — if zoomed in mobile — would most likely break the layout and subsequent interface.
Solution
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 force the UI or Page to zoom so that the texts are readable enough.
You guessed it, the solution.
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 is 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 layout and elements display.
Originally published on my blog - https://www.cssjunction.com/css/stop-zoom-in-on-input-focus-on-mobile-devices/
