Hello, First post here.
I decided to use this platform to write reminders for myself, and quick tips to help everyone during daily development.
Today I had to face a problem on IOS where Safari decides to auto zoom on inputs when user click on them.
This happens when the font-size is considered too small by Apple (because yes, they decide what they want for you always right ?) which is apparently 16px.
Anyway, after searching over the internet for quite some times, and finding posts ranging from 2014 to today, I ended up with this simple solution.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script>
const el = document.querySelector('meta[name=viewport]');
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
if (isIOS) {
const metaViewport = document.querySelector('meta[name=viewport]');
metaViewport.content =
'width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1, maximum-scale=1';
}
</script>
</head>
The important part is to add minimum-scale=1, maximum-scale=1 ONLY for IOS. This will allow your users on desktop/android/iOs to correctly use the app without affecting their ability to manually zoom. And remove only the automatic zoom behavior of Apple devices.
Hope this helps
You can find a lot of ideas on this SO post (included the answer I followed)
https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
Top comments (0)