失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 网页缩放 页面展示比例不变

网页缩放 页面展示比例不变

时间:2022-10-26 03:20:54

相关推荐

网页缩放 页面展示比例不变

获取网页缩放值(网上找的)

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;}}

如果觉得《网页缩放 页面展示比例不变》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。