ウィンドウの解像度をリアルタイムで監視して、Web ページの等倍スケーリングを実現

アイデア:
ブラウザー ウィンドウの解像度を取得し、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;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
            }
        },
      },