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