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

Question

问题

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

Flutter 网络应用程序在调整大小的同时留下了瑕疵。

用例

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

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

Answer 1

这可以简单地使用 HTML DOM JavaScript:

来阻止

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

只需将此添加到您的 Flutter 网络应用 index.html 文件的 <body> 标签中：

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

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

How do I prevent CTRL & Scroll Wheel / Trackpad Zooming in Flutter Web?

html

javascript

dom

flutter

flutter-web

问题

用例