Real-time monitoring of window resolution to achieve equal scaling of web pages

Idea:
Obtain the resolution of the browser window, and perform proportional scaling based on the 1080P standard resolution.
And the window resolution is dynamically bound. When the window size changes, the proportional scaling is performed in real time to ensure the layout.

This method is also applicable to the screen scaling of notebooks, because the scaling of small notebook screens is essentially to change the screen pixel value according to a fixed ratio

    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;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
            }
        },
      },