PC端js禁止浏览器缩放

在网上找了很多资料,多多少少都有一些问题,现在重新整理一下。

1.网上的资料大多都是按照windows的devicePixelRatio来判断是否缩放的,这个判断不是很准确,因为在mac下,默认的devicePixelRatio是为2的,所以需要根据不同的操作系统来判断缩放比例。

devicePixelRatio详细介绍参考张鑫旭老师的博客https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ ,有兴趣的可以去了解一下

2. 监听鼠标滚动的代码也有问题,事件无法监听到,这里也重新改了一下,在windows和mac下自测都是ok的。

 

下面直接贴代码:

<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);
        }
        console.log(window.devicePixelRatio, 123)
        return ratio;
      };
      // window.onresize 事件可用于检测页面是否触发了放大或缩小。
      window.addEventListener('resize', function() {
        isScale();
      })
      isScale();
      //判断PC端浏览器缩放比例不是100%时的情况
      function isScale(){
        var rate = detectZoom(),
          isMac = /macintosh|mac os x/i.test(navigator.userAgent); // Mac默认缩放值为200,windows默认为100,需要分开判断
        if((isMac && rate !== 200) || (!isMac && rate !== 100)){
          //如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
          alert('当前页面不是100%显示,请按键盘ctrl/command + 0恢复100%显示标准,以防页面显示错乱!')
        }
      }
      // 阻止pc端浏览器缩放js代码
      // 由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况,只能通过js来控制了
      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);
        var scrollFunc = function (event) {
          event = event || window.event;
          if (event.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件
            if (event.ctrlKey === true || event.metaKey) {
              event.preventDefault();
            }
          }
        };
        //给页面绑定滑轮滚动事件
        if (document.addEventListener) {
          document.addEventListener('DOMMouseScroll', scrollFunc, false);
        }
        //滚动滑轮触发scrollFunc方法
        window.onmousewheel = document.onmousewheel = scrollFunc;
      }, false);
    </script>

 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值