【vue2 】页面在放大缩小页面下显示问题的处理

在开发中写好了页面，但是没有针对windows设定的放大缩小文本比例来做兼容，故在非100%比例下显示有问题。

小钿钿不忘初心_

1496人浏览 · 2023-05-17 15:42:34

小钿钿不忘初心_ · 2023-05-17 15:42:34 发布

前言

在开发中写好了页面，但是没有针对windows设定的放大缩小文本比例来做兼容，故在非100%比例下显示有问题
在这里插入图片描述

解决方案

1.在utils的js文件中添加一个方法

export const 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
}

2.在需要跳转的页面监听resize方法

methods: {
  resizeFunc() {
	 const m = detectZoom()
	  document.body.style.zoom = 100 / Number(m)
  }
},

mounted() {
    this.resizeFunc()
    window.onresize = () => {
      this.resizeFunc()
    }
  }