vue中根据css zoom属性简单处理页面缩放

注意：使用此方式会使页面比例缩放，所以会导致一些依附于页面比例的功能失效，并且产生一些奇怪的Bug。请勿轻易使用

示例图

示例代码

//zoom样式设置可以放在任何元素上，不是必须放在app根元素上
<div id="app" :style="`zoom:${scaleRadio}`">...</div>

data() {
    return {
        scaleRadio: 1,
    }
},

created() {
    let windowWidth = document.documentElement.offsetWidth || document.body.offsetWidth;
    this.scaleRadio = windowWidth / 1920
},

TIPS

• 火狐浏览器不支持
• 此方法可能会引起UI库的一些带有定位功能的组件的位置问题，如下拉框等。故使用这些组件时，需要注意不要在这些组件所在元素中zoom缩放。