Question

目前，我正在开发与Threejs相关的Vuejs应用。 3D模型将在以后显示。作为框架，我将vuejs与vuetify结合使用。我使用来自vuejs的路由器。

由于我要显示3D模型，因此不希望在浏览器中进行缩放。此外，必须停用智能手机上当今的现代浏览器可以做出的所有手势，以避免例如意外重新加载页面。我为此使用meta标签：

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

不幸的是，它不适用于IOS10 +。所以我用了InoBounce.js。该脚本应该可以解决此问题。

这在开始页面上很好用，但是在我通过按钮更改路线后在任何页面上都没有。因此，当我单击一个按钮返回到起始页面时，该脚本不再在此处运行。这可能是因为创建者没有使其适应vuejs。

我已经尝试在更改路线时使用观察程序再次运行脚本。我已经对该脚本进行了一些重写，以便它不再希望在全局范围内创建自己，而是包含一个导出的方法。然后，我使用Vuex将其“全局”嵌入，然后在每次路线更改时都运行它。看起来像这样：

 watch: {
   $route(to, from) {
     this.$store.state.bounceFix.fixBounce();
  },
 },

浏览器中的调试器还指示每次路由更改时都会调用该方法。但是它仍然只在第一次加载时才在主页上起作用（嗯，因为我也在“安装”区域中称呼它）。

所以...。我真的是互联网上唯一想阻止与vuejs之类的框架进行缩放的人吗？因为不幸的是，我在互联网上找不到很多与此有关的东西。

与vuejs关联的野生动物园中阻止缩放和弹跳的最佳方法是什么？

更新：

我忘记了一件重要的事情：

我还必须将以下几行作为样式添加到标签中：

overflow: auto;
    -webkit-overflow-scrolling: touch;

这应该阻止“刷卡刷新”之类的手势。

Answer 1

你可以试试吗？

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Answer 2

我找到了解决问题的方法。问题在于inobounce脚本中的事件侦听器设置为“ window”元素。我现在将其更改为“ document”元素。现在就可以了。

这个意思：

window.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? { passive : false } : false);

对此：

document.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? { passive : false } : false);