禁止浏览器缩放

其他 专栏收录该内容
38 篇文章 0 订阅

移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放:
windows:
ctrl + +/-
ctrl + 滚轮
浏览器菜单栏
mac:
cammond + +/-
浏览器菜单栏
由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况,只能通过js来控制了

Reference:
stackoverflow关于组织缩放的代码:http://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser
jquery event.whick源码,先取charCode(mdn说明其已被废弃)再取keyCode: https://github.com/jquery/jquery/blob/master/src/event.js#L633

下面是用juery和原生js实现的代码:

img

test测试test测试test测试test测试

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    /**
     * @file 禁止pc浏览器使用ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面 (prevent borwser zoom)
     * 众所周知:移动端页面禁止用户缩放界面只需要在<meta name="viewport" content="user-scalable=0"> 即可,但是pc端确实比较麻烦,只能通过js来控制了
     * @author yangzongjun
     * @date 2017-01-06
     */

    /**
        代码中event.whick的数字代号的意思:
        mac下
        chrome:
        -   189
        +   187

        ff:
        -   173
        +   61

        然后剩余的两个代号是107、109代表的是数字键盘的+-号
     */

    // jqeury version
    // $(document).ready(function () {
    //     // chrome 浏览器直接加上下面这个样式就行了,但是ff不识别
    //     $('body').css('zoom', 'reset');
    //     $(document).keydown(function (event) {

    //       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();
    //            }

    //     });
    // });

    // 原生js来实现,避免依赖jquery。需要注意的是:addEventListener/DOMContentLoaded在ie中是只支持>=ie9的,一般足够了
    document.addEventListener('DOMContentLoaded', function (event) {
        // chrome 浏览器直接加上下面这个样式就行了,但是ff不识别
        document.body.style.zoom = 'reset';
        document.addEventListener('keydown', function (event) {
            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();
                }
        }, false);
        document.addEventListener('mousewheel DOMMouseScroll', function (event) {
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
        }, false);
    }, false);

</script>

获取当前页面浏览器的缩放大小:

// 判断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’)) {
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;
};
//具体实现demo:

浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放) 知乎客户端

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(){
//alert(detectZoom())
})
$(window).on(‘resize’,function(){
isScale();
});
//判断PC端浏览器缩放比例不是100%时的情况
function isScale(){
var rate = detectZoom();
if(rate != 100){
//如何让页面的缩放比例自动为100,‘transform’:'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
console.log(1)
alert(‘当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!’)
}
}

//阻止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();
}
});
});

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

bugdemon8023

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值