浏览器窗口缩放后用css的zoom来保持比例(现在推荐transform）

方法很简单：

1.以下代码就能实现zoom的计算通过实际浏览器大小与默认屏幕大小的比例获取

// 高度计算zoom
var percentage, appHeight = 768;//设置默认屏幕大小
percentage = window.innerHeight * 100 / appHeight;
percentage = Math.floor(percentage) / 100;
document.documentElement.style.zoom= percentage;

现在就搞定了，下面说下transform的方案

首先用transform需要transform-origin:0 0;来指定原点0，0为原点位置根据需要设置

// 高度计算zoom
var percentage, appHeight = 768;//设置默认屏幕大小
percentage = window.innerHeight * 100 / appHeight;
percentage = Math.floor(percentage) / 100;
document.getElementById("POSCashRegisterDetaildiv").style.transform=`scale(${percentage>1.4?1.4:percentage})`;

上面实现以浏览器左上为原点缩放，左上的位置不会变

我是通过obj.getBoundingClientRect().width来获取的transform缩放后的盒子的宽高，（不能用document.body.clientWidth，这样获取永远是设置的原始大小）

通过obj.getBoundingClientRect().width来获取要设置了transform缩放后获取才有效，否则获取的值都是0

var w=document.getElementById("POSCashRegisterDetaildiv").getBoundingClientRect().width||document.getElementById("POSCashRegisterDetaildiv").getBoundingClientRect().width
var clientWidths=((document.body.clientWidth-w)/2)
if (clientWidths<0||w==0) {//如果margin值小于o或者获取到的盒子宽高为0则让margin为0，否则左边就会看不见
clientWidths=0
}
document.getElementById("POSCashRegisterDetaildiv").style.margin="10px "+clientWidths+"px";

 

监听屏幕以下是vue的示例和transform缩放，我做了宽高监听：

1. data中设置默认值（重要）

screenHeight:window.innerHeight,
screenWidth: document.body.clientWidth,

   2.mounted里面监听

const that = this
that.windowOnresizeInnerHeight()
= () => {
return (() => {
window.screenHeight = window.innerHeight
that.screenHeight = window.screenHeight;
that.screenWidth= document.body.clientWidth;
console.log(111)
that.windowOnresizeInnerHeight()
})()

windowOnresizeInnerHeight(){//此方法写在methods里面
    // 高度计算
    var percentage, appHeight = 768;
    percentage = window.innerHeight * 100 / appHeight;
    percentage = Math.floor(percentage) / 100;
    document.documentElement.style.overflow= "hidden";
    
    // 宽度计算
    var percentageWidth, clientWidth = 1024;
    percentageWidth = document.body.clientWidth * 100 / clientWidth;
    percentageWidth = Math.floor(percentageWidth) / 100;
    if (percentage<percentageWidth) {
            document.getElementById("POSCashRegisterDetail").style.display= "block";
            document.getElementById("POSCashRegisterDetaildiv").style.transform=`scale(${percentage>1.4?1.4:percentage})`;
            var w=document.getElementById("POSCashRegisterDetaildiv").getBoundingClientRect().width||document.getElementById("POSCashRegisterDetaildiv").getBoundingClientRect().width
            var clientWidths=((document.body.clientWidth-w)/2)
            if (clientWidths<0||w==0) {
            clientWidths=0
            }
            document.getElementById("POSCashRegisterDetail").style.overflow= "scroll";
            document.getElementById("POSCashRegisterDetaildiv").style.left="0px";
            document.getElementById("POSCashRegisterDetaildiv").style.top="0px";
            document.getElementById("POSCashRegisterDetaildiv").style.margin="10px "+clientWidths+"px";
            }else{
            document.getElementById("POSCashRegisterDetail").style.display= "block";
            document.getElementById("POSCashRegisterDetaildiv").style.transform=`scale(${percentageWidth>1.4?1.4:percentageWidth})`;
            var w=document.getElementById("POSCashRegisterDetaildiv").getBoundingClientRect().width||document.getElementById("POSCashRegisterDetaildiv").getBoundingClientRect().width
            var clientWidths=((document.body.clientWidth-w)/2)
            if (clientWidths<0||w==0) {
            clientWidths=0
            }
            document.getElementById("POSCashRegisterDetail").style.overflow= "scroll";
            document.getElementById("POSCashRegisterDetaildiv").style.left="0px";
            document.getElementById("POSCashRegisterDetaildiv").style.top="0px";
            document.getElementById("POSCashRegisterDetaildiv").style.margin="10px "+clientWidths+"px";
        }
},

 

在vue中直接用window.onresize 监听时灵时不灵，所以用了以下方式监听搞定了，然而我并不知道问题出在哪儿：

const _that=this;
window.addEventListener('resize', function() {
        //要执行的动作
})

这样能解决在vue中监听有些时候监听不到的问题