vue2和vu3屏幕显示适配屏幕等比例缩放？

先上效果图展示

一、禁止项目页面百分比放大缩小(优化辅助使用，可加可不加，凭自愿)

// 禁止缩放
    window.addEventListener(
      "mousewheel",
      function (event) {
        if (event.ctrlKey === true || event.metaKey) {
          event.preventDefault();
        }
      },
      { passive: false }
    );
    //firefox
    window.addEventListener(
      "DOMMouseScroll",
      function (event) {
        if (event.ctrlKey === true || event.metaKey) {
          event.preventDefault();
        }
      },
      { passive: false }
    );

二、监听页面窗口、进行等比例放大缩小

zoom这个属性很关键：用于设置或检索对象的缩放比例

mounted() { 
  window.onresize = () => {
        return (() => {
          // 页面变化监听尺寸
          this.bodyScale()
        })()
      }

  }

methods:{
  // 获取当前屏幕尺寸函数
bodyScale()
  let devicewidth = document.documentElement.clientWidth//获取当前分辨率下的可是区域宽度
  let scale = devicewidth / 1920 // 分母——设计稿的尺寸
  document.body.style.zoom = scale//放大缩小相应倍数
}

注意：

这个zoom属性在vue2项目没有问题可以正常使用，但是在vue3+ts中使用会报不存在这个属性，所以就要换一种方式使用

三、设置屏幕最小宽度比例

完整代码：

 created() {

// 禁止缩放
    window.addEventListener(
      "mousewheel",
      function (event) {
        if (event.ctrlKey === true || event.metaKey) {
          event.preventDefault();
        }
      },
      { passive: false }
    );
    //firefox
    window.addEventListener(
      "DOMMouseScroll",
      function (event) {
        if (event.ctrlKey === true || event.metaKey) {
          event.preventDefault();
        }
      },
      { passive: false }
    );

 }


  mounted() { 
  window.onresize = () => {
        return (() => {
          // 页面变化监听尺寸
          this.bodyScale()
        })()
      }

  }

methods:{
  // 获取当前屏幕尺寸函数
  bodyScale(){
    let devicewidth = document.documentElement.clientWidth//获取当前分辨率下的可是区域宽度
    let scale = devicewidth / 1920 // 分母——设计稿的尺寸
    document.body.style.zoom = scale//放大缩小相应倍数
  }
}

    
      
    


import { onMounted, ref } from '@vue/runtime-core'
export default {
  setup () {
    const scaleva = ref()
    const bodyScale = () => {
      const devicewidth = document.documentElement.clientWidth// 获取当前分辨率下的可是区域宽度
      const scale = devicewidth / 1920 // 分母——设计稿的尺寸
      scaleva.value = scale
    }
    onMounted(() => {
      bodyScale()
      window.onresize = () => {
        return (() => {
          bodyScale()
        })()
      }
    })

    return {
      scaleva,
    }
  }
}


html body {
  font-size: 16px;
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/f37c200dda.html