let scale = 1;
// //
function handleScreen() {
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
const m = detectZoom();
if (screenWidth <=1920&&scale == 1) {
document.body.style.zoom = 100 / Number(m * 1.2);
} else {
document.body.style.zoom = 1;
}
console.log(m, screenWidth, screenHeight, 'm');
}
function 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;
}
function getWindowHeight() {
var zoom = document.body.style.zoom;
var height = $(window).height();
if (zoom) {
return height / zoom;
}
return height;
}
function getWindowWidth() {
var zoom = document.body.style.zoom;
var width = $(window).width();
if (zoom) {
return width / zoom;
}
return width;
}
// // 滚轮缩放事件
function wheelZoom(event) {
event.preventDefault();
if (event.deltaY < 0) {
scale += 0.1; // 向上滚动放大
} else {
scale -= 0.1; // 向下滚动缩小
}
}
window.onresize = function () {
handleScreen();
}
// // 监听滚轮事件
window.addEventListener('wheel', wheelZoom);
handleScreen();<body onresize="handleScreen()">之前适配展示数据一直在使用媒体查询 但是发现工作量太大，使用rem 项目又从一开始根本没有考量，一直都是紧急上线，后期需要修改也是无从下手，但是老板又针对低分辨率，以及显示缩放要展示全。最后在AI帮助下以及同事的指点下完成了这部分适配代码。
思路就是获取到当前视口的缩放比，根据当前视口根据自己设置的条件，若是1920以下以及1920的为了能展示全页面数据就对整个页面的body进行一个缩放，使用的是vue,所以是在index.html中进行的。
其中还添加了scale这个额外的变量参数，因为在调试的过程中发现，对1920以及以下的适配基本OK，但是滚动鼠标滚轮的时候，浏览器默认放大缩小就混乱了，添加这个参数就是标识这个操作是要干什么，页面针对初始化展示一屏宽信息，若是有Ctrl+滚动操作,就改变scale值继续浏览器的放大缩小操作。