PC端网页等比例在手机端显示

1、等比例缩放

APP.vue

methods: {
            bodyScale() {
                let devicewidth = document.documentElement.clientWidth //获取当前分辨率下的可是区域宽度
                let scale = devicewidth / 1920 // 分母——设计稿的尺寸
                document.body.style.zoom = scale //放大缩小相应倍数
            }
        },
mounted() {
            const _this = this;
            this.bodyScale();
            window.onresize = function() {
                _this.bodyScale();
            }.bind(this);
}

 第一段：

• 上述方法的作用是根据当前设备的分辨率调整页面的缩放比例。
• 它通过获取document.documentElement.clientWidth，即当前可视区域的宽度，然后除以固定的设计稿宽度1920，得出缩放比例。
• 最后，通过设置document.body.style.zoom属性来将页面放大或缩小相应倍数。

第二段：

• 在mounted()函数中，首先创建了一个_this变量，将当前的组件实例保存起来，以便在后面的函数内部可以访问到正确的上下文。
• 然后，通过this.bodyScale()调用bodyScale()方法，以初始化页面的缩放比例。
• 接着，通过将一个匿名函数绑定到window.onresize事件上，来监听窗口大小调整的事件。在匿名函数内部，使用_this.bodyScale()调用bodyScale()方法，确保函数内部的this指向组件实例。

 

综上所述，这段代码的作用是在组件挂载后，调用bodyScale()方法来初始化页面的缩放比例，并在窗口大小调整时重新调用bodyScale()方法，以保持页面的缩放比例与窗口大小保持一致。

 2、等比例缩放+允许手动缩小放大

methods: {
          bodyScale() {
            let devicewidth = document.documentElement.clientWidth;
            let scale = devicewidth / 1920;
            document.body.style.zoom = scale;
             
          },
          handlePinch(event) {
            let scale = event.scale;
            document.body.style.transform = `scale(${scale})`;
          }
        },
        mounted() {
          const _this = this;
          this.bodyScale();
          window.onresize = function() {
            _this.bodyScale();
          }.bind(this);
        
          document.addEventListener('gesturechange', this.handlePinch);
        },
        beforeDestroy() {
          document.removeEventListener('gesturechange', this.handlePinch);
        }

这段代码是一个Vue组件中的方法和生命周期钩子函数的实现。

（1）将整个页面按照设计稿的尺寸进行缩放，以适应不同的设备

首先，我们有一个bodyScale方法，它用来将页面内容进行缩放以适应不同的屏幕分辨率。

它通过获取当前可视区域的宽度 devicewidth，然后计算缩放比例 scale，最后将缩放比例应用于 document.body.style.zoom 属性。

（2）确保页面在窗口大小变化时保持适应性

在mounted生命周期钩子函数中，我们首先调用 bodyScale 方法来进行自动缩放以适应初始的屏幕分辨率。

使用 window.onresize 事件监听器来监听窗口大小的改变，当窗口大小改变时，再次调用 bodyScale 方法进行自动缩放。

（3）实现手动缩放页面的效果

handlePinch方法，它用于手动缩放功能。当手势（如捏合）触发时，浏览器会触发 gesturechange 事件。我们可以监听该事件，调用 handlePinch 方法来处理手势缩放。

在handlePinch 方法中，我们获取手势的缩放比例 scale，然后根据该缩放比例将 document.body.style.transform 属性设置为相应的缩放值。

为了使手动缩放功能生效，我们在mounted生命周期钩子函数中使用 document.addEventListener 方法监听 gesturechange 事件，并将其绑定到 handlePinch 方法上。这样当手势缩放触发时，handlePinch 方法会被调用。

（4）避免可能的内存泄漏问题

在beforeDestroy生命周期钩子函数中，我们使用 document.removeEventListener 方法移除之前绑定的 gesturechange 事件监听器。这是为了确保在组件销毁之前，正确地清除所有的事件监听器，避免可能的内存泄漏问题。