DEV Community 👩‍💻👨‍💻

Federico Giacomini
Federico Giacomini

Posted on

Remove automatic zoomIn of inputs on IOS

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>
Enter fullscreen mode Exit fullscreen mode

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)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠