解决网页投屏到LED墙面显示屏显示比例问题

背景：某律所定制的墙面LED显示屏为：30961204 左 / 32681204 右，显示器分辨率为1920*1080。

目标：网页完整投屏到屏幕且不变形。

实现方式：

1. 可考虑使用“LED演播室”软件进行分屏（卡）；
2. 如为视频或图片可考虑使用“vMix”软件以扩展屏的方式展示（网页投屏使用内部浏览器无法加载js）；
3. 考虑显示效果，推荐使用网页进行投屏，具体实现代码如下：

通过计算获取屏幕比例，按1920*2来编写代码；通过动态计算来对页面进行拉伸。
注：背景图尺寸为3840*2160

body{
    /*background-image: url("../images/bg1.jpg");*/
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    width: 3840px;
    height: 1416px;
    overflow: hidden;
    position: relative;
}

var app = new Vue({
    el: '#app',
    data: {
        lawyers: [],
        customers: [],
        ratio: 1
    },
    methods: {
        //切换
        changeTab(type='customer', cacheId=0){
            if(type=='lawyer'){
                $('.customers').hide();
                $('.lawyers').show();
                document.body.style="transform:scale("+this.ratio+", 0.765);-webkit-transform-origin: 0 0;background-image: url('{__STATIC_PATH}datav/images/two_bg1.jpg');";
                this.getLawyer('refresh', cacheId);
            }else{
                $('.customers').show();
                $('.lawyers').hide();
                document.body.style="transform:scale("+this.ratio+", 0.765);-webkit-transform-origin: 0 0;background-image: url('{__STATIC_PATH}datav/images/two_bg2.jpg');";
                this.getCustomer('refresh', cacheId);
            }
        },
        //获取客户
        getCustomer(type='new', cacheId=0){
            axios.get("http://192.168.10.10:1019/api/get_one_customer?cache_id="+cacheId).then(function (res) {
                let data = res.data.data;

                if(data.id == 0){
                    //切换到合作客户
                    setTimeout("app.changeTab('lawyer', 999999)", 5000);
                }else{
                    if(type=='refresh'){
                        app.customers = [];
                    }
                    var arr = app.customers;
                    arr.push(data);

                    this.customers = arr;
                    if(arr.length>=54){
                        setTimeout("app.getCustomer('refresh')", 5000);
                    }else{
                        setTimeout("app.getCustomer()", 500);
                    }
                }
            }).catch(function (err) {
                //alert(err)
            });
        },


        //律师团队
        getLawyer(type='new', cacheId=0){
            axios.get("http://192.168.10.10:1019/api/get_one_user?cache_id="+cacheId).then(function (res) {
                let data = res.data.data;

                if(data.id == 0){
                    //切换到合作客户
                    setTimeout("app.changeTab('customer', 999999)", 5000);
                }else{
                    if(type=='refresh'){
                        app.lawyers = [];
                    }
                    var arr = app.lawyers;
                    arr.push(data);

                    this.lawyers = arr;
                    if(arr.length>=22){
                        setTimeout("app.getLawyer('refresh')", 5000);
                    }else{
                        setTimeout("app.getLawyer()", 500);
                    }
                }
            }).catch(function (err) {
                //alert(err)
            });
        }
    },
    mounted: function () {
        var that = this;
        window.$vm = that;

        //缩放页面
        let targetWidth=3840;
        let currentWidth=window.screen.width;
        let ratio=currentWidth/targetWidth;
        this.ratio = ratio;
        document.body.style=`transform:scale(${ratio}, 0.765);-webkit-transform-origin: 0 0;background-image: url("{__STATIC_PATH}datav/images/two_bg1.jpg"`;

        //律师团队
        this.getLawyer();
        // this.getCustomer();

    }
});

网页最终在1920*1080屏幕展示的拉伸效果如图，投屏后再次拉伸为可接受的变形范围。