获取网页缩放值(网上找的)
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;}
监测缩放
window.addEventListener('resize', this.handleScreen);
以100%缩放为比例,更改body的zoom值
handleScreen() {const vm = this;const m = vm.detectZoom();document.body.style.zoom = 100/Number(m);}
完整代码
mounted() {this.handleScreen();window.addEventListener('resize', this.handleScreen);},destroyed() {window.removeEventListener('resize', this.handleScreen);},methods: {handleScreen() {const vm = this;const m = vm.detectZoom();document.body.style.zoom = 100/Number(m);},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;}}
如果觉得《网页缩放 页面展示比例不变》对你有帮助,请点赞、收藏,并留下你的观点哦!