方法很简单:
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缩放,我做了宽高监听:
-
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中监听有些时候监听不到的问题