浏览器固定缩放比例

本文探讨了如何设置浏览器的固定缩放比例,避免用户手动调整。虽然一些常见的代码片段可能仍然需要用户操作,但通过其他技术可以实现固定缩放,尽管在缩放时页面可能会有轻微变形。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、看了好多博客,都是以下面代码为准

<script type="text/javascript">
    // 判断pc浏览器是否缩放,若返回100则为默认无缩放,如果大于100则是放大,否则缩小
    function detectZoom (){
        var ratio = 0,
            screen = window.screen,
            ua = navigator.userAgent.toLowerCase();
        if (window.devicePixelRatio !== undefined) {
            ratio = window.devicePixelRatio;
        }else if (~ua.indexOf('msie')) { //检测IE浏览器的版本
            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 事件可用于检测页面是否触发了放大或缩小。
    $(window).on('resize',function(){
        isScale();
    });
    //判断PC端浏览器缩放比例不是100%时的情况
    function isScale(){
        var rate = detectZoom();
        /**if(rate != 100){
            //如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
            alert('当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!')
        }*/
         if(rate < 100){
                    //document.getElementsByTagName('body')[0].style.zoom=3;
                    //如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
                    //alert('当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!')
                    if(rate > 90 && rate <= 99){
                        document.getElementsByTagName('body')[0].style.zoom = 1.2;
                        console.log("当前页面显示在90到99之间");
                        console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
                    }else if(rate > 80 && rate <= 89){
                        document.getElementsByTagName('body')[0].style.zoom = 1.4;
                        console.log("当前页面显示在80到89之间");
                        console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
                    }else if(rate > 70 && rate <= 79){
                        document.getElementsByTagName('body')[0].style.zoom = 2;
                        console.log("当前页面显示在70到79之间");
                        console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
                    }else if(rate > 60 && rate <= 69){
                        document.getElementsByTagName('body')[0].style.zoom = 1.8;
                        console.log("当前页面显示在60到69之间");
                        console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
                    }else if(rate > 50 && rate <= 59){
                        document.getElementsByTagName('body')[0].style.zoom = 2.6;
                        console.log("当前页面显示在50到59之间");
                        console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
                    }else if(rate > 40 && rate <= 49){
                        document.getElementsByTagName('body')[0].style.zoom = 2.7;
                        console.log("当前页面显示在40到49之间");
                        console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
                    }else if(rate < 39){
                        document.getElementsByTagName('body')[0].style.zoom = 3.7;
                        console.log("当前页面显示在39之间");
                        console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
                    }

                }else {
                    console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
                    //document.getElementsByTagName('body')[0].style.zoom = 0;
                }
    }

    //阻止pc端浏览器缩放js代码
    //由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况,只能通过js来控制了
    // jqeury version
    $(document).ready(function () {
        // chrome 浏览器直接加上下面这个样式就行了,但是ff不识别
        $('body').css('zoom', 'reset');
        $(document).keydown(function (event) {
            //event.metaKey mac的command键
            if ((event.ctrlKey === true || event.metaKey === true)&& (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187  || event.which === 189)){
                event.preventDefault();
            }
        });
        $(window).bind('mousewheel DOMMouseScroll', function (event) {
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
        });
    });
</script>

但实际上还是需要用户手动修改,不能达到需求。

2、通过下面方法可以固定,但缩放时页面会有细微变化,不过不影响大致功能

 //window.onresize 事件可用于检测页面是否触发了放大或缩小。
$(window).on('resize',function(){
    pageFixedSize()
});
            
function pageFixedSize() {
    var height = $(window).height();
    $('body').css('zoom', height / 720);
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值