Adequado para resoluções 2K e 4K
Este método é adequado para situações onde o projeto foi finalizado no layout de resolução 1920 * 1080. Ao adaptar para diferentes resoluções
1. Crie um arquivo detectZoom.js na pasta utils.
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. Referência em main.js
para adaptação a diferentes resoluções de acordo com n em document.body.style.zoom = 100 / (Number(m) / n)
.document.body.style.zoom = 100 / (Number (m) / 2) é adequado para 3840 2160, enquanto document.body.style.zoom = 100 / (Number(m) / 1.33) é adequado para 2560 1440. As resoluções restantes podem ser definidas de acordo com diferentes valores de 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)
}