+
80
-

js如何禁止用户进行网页缩放?

请问js如何禁止用户进行网页缩放?

网友回复

+
0
-

现在没办法绝对禁止用户缩放网页,但是可以增加一个有情提醒,比如当前网页缩放非100%,为了您的体验,请缩放至100%;

可以在用户进行缩放网页的时候进行提醒。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        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;
            
            };
            $(document).keydown(function(event) {
        if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109'  || event.which == '187'  || event.which == '189'  ) ) {
                event.preventDefault();
                 var rate = detectZoom();
                 if(rate != 100){
                  console.log(rate)
                  alert("当前页面不是100%显示。为了您的体验,请缩放至100%,按ctrl+0键");
           
        
                 }
             }
            // 107 Num Key  +
            // 109 Num Key  -
            // 173 Min Key  hyphen/underscore key
            // 61 Plus key  +/= key
        });
        
        $(window).bind('mousewheel DOMMouseScroll', function (event) {
               if (event.ctrlKey == true) {
               event.preventDefault();
                 var rate = detectZoom();
                 if(rate != 100){
                  console.log(rate)
                  alert("当前页面不是100%显示。为了您的体验,请缩放至100%,按ctrl+0键");
           
        
                 }
               }
        });
    </script>
    <style>
    </style>
</head>

<body>
    <div>
        缩放试试
    </div>
</body>

</html>

我知道答案,我要回答