自動調整瀏覽器百分比

瀏覽器設置非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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章