适配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)
}