自动调整浏览器百分比

浏览器设置非100%时，能够自动调整浏览器百分比，显示页面按照100%显示，比如浏览器125%，用户也不知道的情况下，显示时页面会被放大，这时可以通过

$("body").css({
            transform: "scale("+ratioX+","+ratioY+")",
            transformOrigin: "left top",
            overflow:"hidden"
        });

进行页面缩放设定，缩放比例为“100/当前百分比”

<html>
<head>
    <title>自动恢复缩放比例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>

    </style>
</head>
<body>
<img src="../images/guangzhou.png" />
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //获取浏览器缩放比例
    function ChangeRatio()
    {
        var ratio=0;
        var screen=window.screen;
        var ua=navigator.userAgent.toLowerCase();

        if(window.devicePixelRatio !== undefined)
        {
            ratio=window.devicePixelRatio;
        }
        else if(~ua.indexOf('msie'))
        {
            if(screen.deviceXDPI && screen.logicalXDPI)
            {
                ratio=screen.deviceXDPI/screen.logicalXDPI;
            }

        }
        else if(window.outerWidth !== undefined && window.innerWidth !== undefined)
        {
            ratio=window.outerWidth/window.innerWidth;
        }

        if(ratio)
        {
            ratio=Math.round(ratio*100);
        }
        return ratio;
    }


    //监听浏览器变化
    window.onresize = function() {
//        initWindowSize();
    };

    //进行比例缩放
    function setAppScale(ratio) {

        var ratioX = (100/ratio);
        var ratioY = (100/ratio);
        $("body").css({
            transform: "scale("+ratioX+","+ratioY+")",
            transformOrigin: "left top",
//            overflow:"hidden"
        });
    }


    function initWindowSize(){


        var ratio = ChangeRatio();
        console.log(ratio);
        setAppScale(ratio);
    }

    initWindowSize();


</script>
</body>
</html>

自动调整浏览器百分比

猜你喜欢