解决屏幕缩放大小让元素不变动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test div</title>
</head>

<style>
    body,
    html {
        padding: 0;
        margin: 0;
    }

    #app,
    body,
    html {
        width: 100%;
        height: 100%;
    }

    #app {
        width: 100%;
        height: 100%;
    }

    #data-view {
        width: 100%;
        height: 100%;
        background-color: #030409;
        color: #fff;
    }

    #div1 {
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        z-index: 999;
        background-image: url('http://datav.jiaminghi.com/demo/construction-data/img/bg.837e99ea.png');
        background-size: 100% 100%;
        flex-direction: column;
        display: flex;
        color: #fff;
    }
</style>
<body>

    <div id="app">
        <div id="data-view">
            <div id="div1">
                <div style="width: 200px;height: 200px;border: 1px solid red;">
                    12121
                </div>

            </div>
        </div>
    </div>
</body>
</html>
<script>
    console.log('window.screen',window.screen)
    class myResize {
        constructor(domName) {
            this.dom = document.querySelector(domName);
            this.allWidth = 0;
            this.initConfig();
            this.onResize();
        }
        initConfig = () => {
            const { dom } = this;
            const { width, height } = window.screen;
            this.allWidth = width;
            dom.style.width = `${width}px`;
            dom.style.height = `${height}px`;
            this.setAppScale();
        }
        setAppScale = () => {
            const { allWidth, dom } = this;
            const currentWidth = document.body.clientWidth;
            dom.style.transform = `scale(${currentWidth / allWidth})`;
        }
        onResize = () => {
            const {
                initConfig
            } = this;
            window.addEventListener('resize', initConfig);
        }

    }
    new myResize('#div1');
</script>