最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Unable to remove zoom in and zoom out in my flutter web - Stack Overflow

programmeradmin7浏览0评论

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.

Share Improve this question asked May 21, 2021 at 14:45 Deepak LohmodDeepak Lohmod 2,2822 gold badges11 silver badges22 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

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>

发布评论

评论列表(0)

  1. 暂无评论