如何防止 CTRL 和滚轮/触控板在 Flutter Web 中缩放？

【问题标题】：How do I prevent CTRL & Scroll Wheel / Trackpad Zooming in Flutter Web?如何防止 CTRL 和滚轮/触控板在 Flutter Web 中缩放？
【发布时间】：2021-07-06 09:46:27
【问题描述】：

问题

如果我在 Chrome (Windows) 中使用 CTRL + 滚轮或捏合来缩放触控板，我会看到这种奇怪的行为：

Flutter Web 应用正在调整大小但也留下了工件。

用例

如果我想覆盖滚动放大/触控板缩放行为，以便在我的 Flutter Web 应用程序中使用它来放大画布，例如，这会阻止我这样做。即使我对缩放手势做出反应，Flutter 也不会阻止这种默认行为。

那么我该如何防止这种情况发生呢？

【问题讨论】：

标签： javascript html flutter dom flutter-web

【解决方案1】：

这可以简单地使用 HTML DOM JavaScript 来防止：

// This prevents zooming in using CTRL + mouse wheel.
// See https://stackoverflow.com/a/67039291/6509751.
document.addEventListener('wheel', function(e) {
  e.ctrlKey && e.preventDefault();
}, {
  passive: false,
});

只需将其添加到 Flutter Web 应用的 index.html 文件的 <body> 标记中：

<script>
  // This prevents zooming in using CTRL + mouse wheel.
  // See https://stackoverflow.com/a/67039291/6509751.
  document.addEventListener('wheel', function(e) {
    e.ctrlKey && e.preventDefault();
  }, {
    passive: false,
  });
</script>

【讨论】：