防止像figma那样的网页放大，

Question

我正在开发一个拖放应用程序，我需要防止用户放大和缩小网页，像这样的东西

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

alse已尝试

 document.addEventListener("wheel", zoomShortcut); //add the event

  function zoomShortcut(e) {
    console.log(e);

    e.preventDefault(); //prevent zoom


  }

它们都不起作用。

Answer 1

所以这里我的问题主要是在mac用户上，所以我不得不打开一些文档，阅读一个事件gesturestart，我认为这主要是关于mac书籍的，所以我编辑了我的代码，并添加了这个侦听器

  document.addEventListener("gesturestart", e => {
    e.preventDefault();
    doStuff(e);
  });

并且还添加了

  document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
  });

并运行代码，它在safari上工作，但当我在chrome上运行时，我得到了一个错误

Unable to preventDefault inside passive event listener invocation.

在做了一些研究之后，我发现了一些关于在我的事件侦听器中设置被动选项的事情，所以我的代码变成了

 document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
  },{passive:false});

这解决了我的问题，我能够防止像Figma这样的用户在整个网页上进行收缩缩放