0

目前我正在开发一个与 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;

这应该阻止诸如“滑动刷新”之类的手势。

4

2 回答 2

2

你能试试这个吗？

<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">
于 2018-07-31T13:58:43.973 回答
0

我找到了解决我的问题的方法。问题是 inobounce 脚本中的事件监听器被设置为“window”元素。我现在已将其更改为“文档”元素。现在它可以工作了。

意思由此而来：

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

对此：

document.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? { passive : false } : false);
于 2018-08-01T12:16:53.983 回答