js實現禁止pc端瀏覽器縮放和獲取當前頁面瀏覽器的縮放大小

時間 2019-11-10

標籤實現禁止瀏覽器縮放獲取當前頁面大小欄目 JavaScript 简体版

原文原文鏈接

衆所周知：移動端頁面禁止用戶縮放界面只需加上<meta name="viewport" content="user-scalable=0">便可，可是pc端確實比較麻煩，用戶能夠經過以下幾種方式來縮放：javascript

windows：css

ctrl + +/-
ctrl + 滾輪
瀏覽器菜單欄

mac：html

cammond + +/-
瀏覽器菜單欄

因爲瀏覽器菜單欄屬於系統軟件權限，沒發控制，咱們着手解決ctrl/cammond + +/- 或 Windows下ctrl + 滾輪縮放頁面的狀況，只能經過js來控制了java

Reference：
stackoverflow關於組織縮放的代碼：http://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser
jquery event.whick源碼，先取charCode(mdn說明其已被廢棄)再取keyCode： https://github.com/jquery/jquery/blob/master/src/event.js#L633jquery

下面是用juery和原生js實現的代碼：git

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
</head>
<body>
<div class="wrap"></div>

<p>test測試test測試test測試test測試</p>

    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script>
        /**
         * @file 禁止pc瀏覽器使用ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面 (prevent borwser zoom)
         * 衆所周知：移動端頁面禁止用戶縮放界面只須要在<meta name="viewport" content="user-scalable=0"> 便可，可是pc端確實比較麻煩，只能經過js來控制了
         * @author yangzongjun
         * @date 2017-01-06
         */

        /**
            代碼中event.whick的數字代號的意思：
            mac下
            chrome:
            -   189
            +   187

            ff:
            -   173
            +   61

            而後剩餘的兩個代號是10七、109表明的是數字鍵盤的+-號
         */

        // jqeury version
        // $(document).ready(function () {
        //     // chrome 瀏覽器直接加上下面這個樣式就好了，可是ff不識別
        //     $('body').css('zoom', 'reset');
        //     $(document).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();
        //        }
        //     });

        //        $(window).bind('mousewheel DOMMouseScroll', function (event) {
        //            if (event.ctrlKey === true || event.metaKey) {
        //                event.preventDefault();
        //            }

        //     });
        // });

        // 原生js來實現，避免依賴jquery。須要注意的是：addEventListener/DOMContentLoaded在ie中是隻支持>=ie9的，通常足夠了
        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);
            document.addEventListener('mousewheel DOMMouseScroll', function (event) {
                if (event.ctrlKey === true || event.metaKey) {
                    event.preventDefault();
                }
            }, false);
        }, false);

    </script>
</body>
</html>

獲取當前頁面瀏覽器的縮放大小：github

// 判斷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;
};

//具體實現demo:chrome

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>瀏覽器網頁內容的百分比縮放（按Ctrl和+號鍵或者-號鍵的縮放）</title>
  <style type="text/css">
  </style>
  </head>
  <body>
    <a href="javascript:;" id="openApp">知乎客戶端</a>
    <input type="text" name="ee" autocomplete="on">
  </body>
 </html>
<script type="text/javascript" src="js/jquery-1.11.3.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%顯示標準，以防頁面顯示錯亂！')
  }
}

//阻止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>