vue pc端禁止滚轮页面缩放

最新推荐文章于 2024-03-21 18:36:40 发布

爬坑的小白

最新推荐文章于 2024-03-21 18:36:40 发布

阅读量737

点赞数

文章标签： Vue devicePixelRatio 屏幕适配窗口调整 keepRatio

本文链接：https://blog.csdn.net/ZJ15981837003/article/details/126392432

版权

在App.vue中

mounted () {
    this.keepRatio()
    window.addEventListener('resize', () => {
      this.keepRatio()
    });
  },

methods: {
    keepRatio() {
      var ratio = 0 // 定义一个缩放比例
      var screen = window.screen // 获取窗口对象
      var 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)
      }
      this.ratio = (ratio / 100).toFixed(2)
      document.body.style.zoom = 1 / this.ratio // 窗口视图除以缩放比例：即缩放还原
    }
  }