| 浏览器窗口缩放后用css的zoom来保持比例(现在推荐transform） | 您所在的位置：网站首页 › zoom背景怎么设置 › 浏览器窗口缩放后用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 { 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 (percentage1.4?1.4:percentage})`; var w=document.getElementById("POSCashRegisterDetaildiv").getBoundingClientRect().width||document.getElementById("POSCashRegisterDetaildiv").getBoundingClientRect().width var clientWidths=((document.body.clientWidth-w)/2) if (clientWidths1.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 |
| CopyRight 2018-2019 实验室设备网 版权所有 |