JavaScript ------ 获取浏览器缩放比例,若不是100% ,给出提示

原由:弹窗问题,不再当前页面内展示的数据,弹窗弹不出来,而且只要前面的弹出来,后面的也可弹出来了

多方测试以为与浏览器的滚动条有关

最后,偶然发现和浏览器的缩放有关系,当浏览器缩放比例为100%  的时候,未在当前页面展示的数据,可以弹出,而不在此范围的不行

而通过js 又禁止不了浏览器缩放,故通过js 进行设置,如果浏览器缩放比例不是 100% 给出提示。

   <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

   <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')) {
       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%显示标准,以防页面显示错乱!')
       //var t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
     
     }
   }
    
   //阻止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>

 防止页面body 内容受到浏览器缩放影响,js  的 zoom 属性

 <script>
     window.onload = function() {
        document.body.style.zoom = "normal"; //避免zoom尺寸叠加
        let scale = document.body.clientWidth / 1904;
        document.body.style.zoom = scale;
      };
      //防抖,避免resize占用过多资源
      (function() {
        var throttle = function(type, name, obj) {
          obj = obj || window;
          var running = false;
          var func = function() {
            if (running) {
              return;
            }
            running = true;
            requestAnimationFrame(function() {
              obj.dispatchEvent(new CustomEvent(name));
              running = false;
            });
          };
          obj.addEventListener(type, func);
        };

        throttle("resize", "optimizedResize");
      })();

      window.addEventListener("optimizedResize", function() {
        document.body.style.zoom = "normal";
        let scale = document.body.clientWidth / 1904;
        document.body.style.zoom = scale;
  });
    </script>

 

posted on 2020-12-03 09:35  obge  阅读(3828)  评论(0编辑  收藏  举报