web-dev-qa-db-fra.com

Empêcher le zoom sur plusieurs navigateurs

Pour un outil semblable à une carte, j'aimerais désactiver la fonction de zoom du navigateur . (Je sais que c'est généralement une mauvaise idée, mais pour certains sites Web, cela est nécessaire).

Je l'ai fait avec succès en écoutant le raccourci clavier CTRL+ / CTRL- et en ajoutant e.preventDefault(), etc. Mais cela n'empêche pas de modifier le zoom depuis le menu Zoom du navigateur.

J'ai essayé:

  • avec CSS: zoom: reset; Cela fonctionne pour Chrome (voir cette page pour un exemple de travail ) mais cela ne fonctionne pas du tout sur Firefox.

  • dans diverses questions/réponses, j'ai aussi trouvé

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    mais cela semble fonctionner pour mobile uniquement.

Comment empêcher le zoom sur plusieurs navigateurs?

javascripthtmlcsscross-browser
56
Basj

Vous pouvez désactiver le zoom dans le navigateur en appuyant sur Ctrl + ou Ctrl- ou en utilisant Ctrl + molette de la souris vers le haut ou le bas à l'aide de ce code. 

$(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();
     }
    // 107 Num Key  +
    // 109 Num Key  -
    // 173 Min Key  hyphen/underscor Hey
    // 61 Plus key  +/= key
});

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

Regardez une démo ici http://jsfiddle.net/VijayDhanvai/4m3z3knd/

29
Vijay Dhanvai

Je n'ai pas vraiment trouvé de réponse "faisant autorité", ce qui signifie une déclaration claire des développeurs de navigateurs. Cependant, toutes les réponses à des questions similaires que j'ai trouvées (comme celle-ci ou celle-là ) suggèrent la même chose - la fonctionnalité de zoom du navigateur existe dans l'intérêt des utilisateurs et de certains navigateurs (comme Firefox). ne vous autorisez tout simplement pas, en tant que créateur de site Web, à leur retirer cette option.

Cette documentation pourrait permettre de comprendre pourquoi il peut être judicieux de permettre aux auteurs de désactiver le zoom sur les appareils mobiles, mais pas sur les ordinateurs de bureau.

En bref, vous devrez peut-être empêcher les appareils mobiles de zoomer initialement sur votre site Web si vous savez que leur zoom automatique calculé sera inapproprié. Sur les ordinateurs de bureau, il n'y a pas de zoom automatique. Ainsi, lorsque les utilisateurs accèdent à votre site Web, ils le voient exactement comme il était censé être vu. S'ils décident ensuite de zoomer sur la page, il n'y a aucune raison de vous empêcher de le faire.

En ce qui concerne les solutions que vous avez énumérées:

  • zoom est une propriété non standard non prise en charge par Firefox , et
  • <meta name="viewport"> concerne uniquement les périphériques sur lesquels fenêtre d'affichage de la présentation _ et fenêtre d'affichage visuelle sont pas la même chose , c'est-à-dire les périphériques mobiles.
28
hon2a

Je pense que ce que vous pouvez faire est d'écouter l'événement de zoom du navigateur (ctrl + "+"), puis de vérifier window.devicePixelRatio.

Appliquez ensuite la transformation d’échelle HTML5 sur l’élément body afin de réduire le même rapport. Donc, fondamentalement, vous ne pouvez pas empêcher la fonctionnalité, mais vous pouvez appliquer un effet négatif avec la même ampleur.

Code POC:

 <body style="position: absolute;margin: 0px;">
        <div style="width: 300px; height: 200px; border: 1px solid black;">
            Something is written here
        </div>
        <script>
            var keyIncrease = [17, 61];
            var keyDecrease = [17, 173];
            var keyDefault = [17, 48];
            var listenMultiKeypress = function(keys, callback){
                var keyOn = [];
                for(var i=0; i<keys.length; i++){
                    keyOn[i] = false;
                }
                addEventListener('keydown', function(e){
                    var keyCode = e.which;
                    console.log(keyCode);
                    var idx = keys.indexOf(keyCode);
                    if(idx!=-1){
                        keyOn[idx] = true;
                    }
                    console.log(keyOn);
                    for(var i=0; i<keyOn.length; i++){
                        if(!keyOn[i]){
                            return;
                        }
                    }
                    setTimeout(callback, 100);
                });
                addEventListener('keyup', function(e){
                    var keyCode = e.which;
                    var idx = keys.indexOf(keyCode);
                    if(idx!=-1){
                        keyOn[idx] = false;
                    }
                    console.log(keyOn);
                });
            };
            var previousScale = 1;
            var previousDevicePixelRatio;
            var neutralizeZoom = function(){
                //alert('caught');
                var scale = 1/window.devicePixelRatio;

                document.body.style.transform = 'scale('+(1/previousScale)+')';
                document.body.style.transform = 'scale('+scale+')';
                var widthDiff = parseInt(getComputedStyle(window.document.body).width)*(scale-1);
                var heightDiff = parseInt(getComputedStyle(window.document.body).height)*(scale-1);
                document.body.style.left = widthDiff/2 + 'px';
                document.body.style.top = heightDiff/2 + 'px';
                previousScale = scale;
            };

            listenMultiKeypress(keyIncrease, neutralizeZoom);
            listenMultiKeypress(keyDecrease, neutralizeZoom);
            listenMultiKeypress(keyDefault, neutralizeZoom);
            neutralizeZoom();
        </script>
    </body>
</html>
8
thunder

J'ai mis à jour le code de code Vijay:

$(document).ready(function(){
 var keyCodes = [61, 107, 173, 109, 187, 189];

 $(document).keydown(function(event) {   
   if (event.ctrlKey==true && (keyCodes.indexOf(event.which) != -1)) {
     alert('disabling zooming'); 
     event.preventDefault();
    }
 });

 $(window).bind('mousewheel DOMMouseScroll', function (event) {
    if (event.ctrlKey == true) {
      alert('disabling zooming'); 
      event.preventDefault();
    }
  });
});

Cette solution est multi-plateforme (OS/Win) pour les navigateurs de bureau.

3
Andrei Gordiichuk

C'est simple:

function load(){
  document.body.addEventListener("wheel", zoomShortcut); //add the event
}

function zoomShortcut(e){
  if(e.ctrlKey){            //[ctrl] pressed?
    event.preventDefault();  //prevent zoom
    if(e.deltaY<0){        //scrolling up?
                            //do something..
      return false;
    }
    if(e.deltaY>0){        //scrolling down?
                            //do something..
      return false;
    }
  }
}
p {
  display: block;
  background-color: #eeeeee;
  height: 100px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Mousewheel control!</title>
  </head>
  <body onload="load()">
    <p>If your Mouse is in this Box, you can't zoom.</p>
  </body>
</html>

2
B. Colin Tim

Insérez les éléments suivants dans votre code HTML:

Pour les mobiles: insérez entre les balises '<head> ... </ head> ".

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">

Pour les navigateurs multiples: insérez la balise juste après le début '<body> ...'.

<script>
  document.body.addEventListener("wheel", e=>{
    if(e.ctrlKey)
      event.preventDefault();//prevent zoom
  });
</script>
1
Jeremy Levett
$(document).ready(function () {
      $(document).keydown(function (event) {
          if (event.ctrlKey == true && (event.which == '107' || event.which == '109' || event.which == '187' || event.which == '189'))
           {
               event.preventDefault();
           }
       });

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

      });
  })
1
Shanu Shaji

As-tu essayé ...

    $("body").css({
        "-moz-transform":"scale(1)",
        "-webkit-transform":"scale(1)",
        "-o-transform":"scale(1)",
        "-ms-transform":"scale(1)"
    });

J'ai utilisé ce type de code pour définir ou redéfinir l'échelle.

0
rfornal