Unable to remove zoom in and zoom out in my flutter web

833

I found the answer to disable zoom in both mobile and desktop by adding following javascript code in the body of index.html file:-

<script>
  document.addEventListener('wheel', function(e) {
    e.ctrlKey && e.preventDefault();
  }, {
    passive: false,
  });
</script>
<script>
  window.addEventListener('keydown', function(e) {
    if (event.metaKey || event.ctrlKey) {
      switch (event.key) {
        case '=':
        case '-':
          event.preventDefault();
          break;
      }
    }
  });
</script>

Share:
833
Deepak Lohmod
Author by

Deepak Lohmod

I love developing flutter apps. I am aiming to serve back to dev community via answering queries on StackOverflow and public projects on GitHub. Need any help? You can find me at:- https://www.linkedin.com/in/deepaklohmod/

Updated on December 29, 2022

Comments

  • Deepak Lohmod
    Deepak Lohmod over 1 year

    I want to disable zoom in flutter web. I have tried these things:-

    1) Added below code to index.html file

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    But it gave me the following warning and didn't disabled the zoom.

    WARNING: found an existing <meta name="viewport"> tag. Flutter Web uses its own viewport configuration for better compatibility with Flutter. This tag will be replaced.
    

    2) Added the below code to index.html in body tag:-

    <script>
      document.addEventListener('wheel', function(e) {
        e.ctrlKey && e.preventDefault();
      }, {
        passive: false,
      });
    </script>

    It disabled the zoom with ctrl and mouse scroll but not the zoom with ctrl + for zoom and ctrl - for zoom out.

    SO, can you please tell how can i disable zoom in and out in my web for all platforms i.e desktop, android and ios.