实时监控窗口分辨率实现网页等比例缩放

思路：
获取浏览器窗口分辨率，以1080P标准分辨率为基础，进行等比缩放。
并将窗口分辨率进行动态绑定，当窗口大小发生变化时，实时进行等比缩放以保证布局。

该方法同样适用与笔记本的屏幕缩放，因为笔记本小屏的缩放本质上就是按照固定比例改变屏幕像素值

    data(){
    
    
        return {
    
    
            clientWidth:'',//用于监控浏览器分辨率变化
        }
    },
    created (){
    
    
        this.zoom();
        window.onresize = () => {
    
    
            return (() => {
    
    
                this.clientWidth = document.documentElement.clientWidth
            })()
        }
    },
    watch: {
    
     
        clientWidth: {
    
    
            handler: function(newVal,oldVal) {
    
    
                this.zoom();
            },
            // immediate: true
            // deep: true
        },
    },
    methods: {
    
    
        zoom(){
    
    
            // 缩放
            // let t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
            let t = 1920 / document.documentElement.clientWidth //根据标准分辨率整体缩放

            if (!!window.ActiveXObject || "ActiveXObject" in window) {
    
    
                if (t != 1) {
    
    
                    // 如果在笔记本中用IE浏览器打开 则弹出提示
                    alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
                }
            } else {
    
    
                // 如果进行了缩放，也就是不是1
                let c = document.querySelector('body')
                c.style.zoom = -0.6 * t + 1.55;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
            }
        },
      },