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>