javascript - VueJS : prevent bouncing and zooming on IOS10+ with routing

Question

目前我正在开发与 Threejs 相关的 Vuejs 应用程序。稍后将显示 3D 模型。作为一个框架，我使用 vuejs 和 vuetify。我使用 vuejs 的路由器。

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

<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 相关的 safari 中阻止缩放和弹跳的最佳方法是什么？

更新:

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

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

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