zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    兼容Linux和Windows下获取视频截图
    webSocket通信
    解决IE浏览器弹出下载框的问题
    jsp的九大内置对象和四大作用域(转)
    如何确定神经网络的层数和隐藏层神经元数量
    Mac 修改系统默认Java版本
    Weka的使用
    在Mac OS系统中安装oracle
    P & NP & NPC & NP-HARD
    Dynamic programming——自下而上 VS. 自上而下
  • 原文地址:https://www.cnblogs.com/obge/p/14074023.html
Copyright © 2011-2022 走看看