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值继续浏览器的放大缩小操作。