The easiest solution to visualize the large screen in 2021

Purpose

Solve the problem of page confusion and realize large-screen adaptation with multiple resolutions

Simplest implementation

Does not affect the current project, directly wrap a layer outside (you can also adjust the code to the project)

<style>
    body,html{height:100%;overflow: hidden;margin: 0;padding: 0;background-color: #272727;}
    .box{
        width:1920px;
        height:1080px;
        transform:scale(1,1);
        transform-origin:left top;
        background-image: url(img/1920-1080.jpg);
        background-repeat: no-repeat;
        background-color: #000;
    }
    .box iframe{
        width:100%;
        height:100%;
        border:none;
    }
</style>

<div id="app" class="box">
    <iframe src="https://www.elephdev.com"></iframe>
</div>

<script>
    !function resizeScale(id){
        var dom = document.getElementById(id);
        var domW = dom.clientWidth;
        var domH = dom.clientHeight;
        setScale();
        window.addEventListener('resize',function(){
            setScale();
        },false);
        function setScale(){
            var winW = window.innerWidth,
                winH = window.innerHeight,
                scaleX = winW/domW,
                scaleY = winH/domH;
            dom.style.transform ='scale('+ scaleX +','+ scaleY +')';
        }
    }('app');
</script>