根据屏幕尺寸缩放代码

Posted 2021-12-03 小企鹅推雪球!

 function refreshScale() {
        let docWidth = document.documentElement.clientWidth;
        let docHeight = document.documentElement.clientHeight;
        var designWidth = 1920,
            designHeight = 1080,
            widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
        }, 0)
    };
    function mhs_onresize() {
        var bodyStyle = document.createElement('style')
        bodyStyle.innerhtml = `body{width:1920px; height:1080px!important;overflow: hidden}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        this.refreshScale()
        window.addEventListener("pageshow", function (e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                this.refreshScale()
            }
        }, false);
        window.addEventListener("resize", this.refreshScale, false);
    };
    mhs_onresize()