Currently, I am developing a Vue.js application that integrates with Three.js to display 3D models. I am using Vue.js with Vuetify as the framework and incorporating the Vue.js router.
Due to the nature of displaying 3D models, I need to prevent zooming in the browser and disable certain gestures on smartphones to avoid unwanted interactions such as accidental page reloads. To achieve this, I have added the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Unfortunately, this approach does not work on IOS10+, so I have implemented InoBounce.js as a workaround to address this issue.
While the script functions correctly on the initial page load, it fails to maintain its functionality when navigating between pages via buttons. This could be due to compatibility issues with vuejs integration, as the script creator may not have designed it with Vue.js in mind.
To resolve this, I attempted to re-run the script through a watcher when route changes occur. I modified the script to export a method instead of creating itself globally, stored it in Vuex for global accessibility, and called it every time the route changed. Here is an example:
watch: {
$route(to, from) {
this.$store.state.bounceFix.fixBounce();
},
},
Despite confirming that the method is invoked during route changes, the script continues to only function on the main page upon initial load (since I also call it in the "mounted" lifecycle hook).
Thus, I am left wondering if I am one of the few individuals seeking to disable zooming in conjunction with a complex framework like Vue.js, given the limited resources available online addressing this specific challenge.
What is considered the most effective method to restrict zooming and bouncing in Safari while utilizing Vue.js?
UPDATE:
I overlooked an essential aspect:
In addition to the previous steps, I had to include the following CSS properties within my <style> tag:
overflow: auto;
-webkit-overflow-scrolling: touch;
This adjustment aims to eliminate gestures such as "swipe to refresh."