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" />

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 patibility 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.

• javascript
• html
• flutter
• zooming
• flutter-web

1 Answer 1

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>