一个简单的vue兼容分辨率方案

最新推荐文章于 2023-12-13 14:33:01 发布

_小郑有点困了

最新推荐文章于 2023-12-13 14:33:01 发布

阅读量717

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44706619/article/details/130379731

版权

vue 专栏收录该内容

79 篇文章 5 订阅

订阅专栏

mounted(){
    this.handleScreen()
    window.addEventListener("resize",()=>{
      this.handleScreen()
    })
  },
  methods:{
    handleScreen(){
      const m = this.detectZoom();
      document.body.style.zoom = 100/Number(m);
    },
    detectZoom(){
      let ratio = 0,
      screen = window.screen,
      ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
      } else if (~ua.indexOf('msie')) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI;
      }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
      }
      if (ratio) {
        ratio = Math.round(ratio * 100);
      }
      return ratio;
    }
  }