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

最新推荐文章于 2025-03-20 13:58:32 发布

_小郑有点困了

最新推荐文章于 2025-03-20 13:58:32 发布

阅读量826

点赞数 1

CC 4.0 BY-SA版权

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

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

vue 专栏收录该内容

83 篇文章

订阅专栏

该代码段实现了一个Vue组件的方法，主要用于监听窗口大小变化和页面加载时自动调整页面缩放，以确保在不同设备和分辨率下有良好的显示效果。detectZoom函数通过检测浏览器特性计算出设备像素比，然后handleScreen方法将这个比例应用到body元素的zoom样式上。

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;
    }
  }