无法在我的Flutter Web中删除缩放功能

Question

我想禁用Flutter Web中的缩放。我已经尝试了以下几个方法：-

1）将以下代码添加到index.html文件中

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

但它给了我以下警告，并没有禁用缩放。

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）在index.html文件的body标签中添加了以下代码：

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

它禁用了使用Ctrl和鼠标滚轮的缩放，但不禁用使用Ctrl +进行放大和Ctrl - 进行缩小的缩放。

那么，请问如何在我的网站上禁用所有平台（包括桌面、Android和iOS）的缩放？

- Deepak Lohmod

Answer 1

我发现可以通过在index.html文件的body中添加以下JavaScript代码来禁用移动设备和桌面端的缩放：

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

- Deepak Lohmod

---

你是否也找到了一种方法，在Chrome设置中手动调整缩放时禁用它？ - danle

@danle 我没有尝试过。 - Deepak Lohmod

大家不要忘记，不同语言的键盘可能使用不同的键来进行缩放，所以您可能需要将 case '=' 改为 case '+'。 - Bora Keçeci