DEV Community

Federico Giacomini
Federico Giacomini

Posted on

2 2

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 (1)

Collapse
 
izhuk5 profile image
Ihor Zhuk

Thanks from end of 2024)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more