适配2K和4K分辨率

适配2K和4K分辨率

本方法适用于项目已经在1920*1080分辨率的布局下定型的情况，在适应不同分辨率
1.在utils文件夹下创建一个detectZoom.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.在main.js中引用
根据 乘和除document.body.style.zoom = 100 / (Number(m) / n)中的n来适应不同分辨率
document.body.style.zoom = 100 / (Number(m) / 2)适用于38402160，而document.body.style.zoom = 100 / (Number(m) / 1.33)适用于25601440，其余分辨率均可以根据n的值不同而设置。

import {
    
     detectZoom } from '@/utils/detectZoom.js';
const m = detectZoom()
if (window.screen.width * window.devicePixelRatio >= 3840) {
    
    
  document.body.style.zoom = 100 / (Number(m) / 2)
} else if (window.screen.width * window.devicePixelRatio >= 2560 && window.screen.width * window.devicePixelRatio <= 3840) {
    
    
  document.body.style.zoom = 100 / (Number(m) / 1.33)
} else {
    
    
  document.body.style.zoom = 100 / Number(m)
}