自动调整浏览器百分比

浏览器设置非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>

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值