Saisir L'événement "zoom" du navigateur en JavaScript

j'utilise ce morceau de JavaScript pour réagir au Zoom"événements".

Il interroge la largeur de la fenêtre. (Comme un peu suggéré sur cette page (à laquelle Ian Elliott lié): http://novemberborn.net/javascript/page-zoom-ff3 [archive] )

Testé avec Chrome, Firefox 3.6 et Opera, pas IE.

Cordialement, Magnus

var zoomListeners = [];

(function(){
  // Poll the pixel width of the window; invoke zoom listeners
  // if the width has been changed.
  var lastWidth = 0;
  function pollZoomFireEvent() {
    var widthNow = jQuery(window).width();
    if (lastWidth == widthNow) return;
    lastWidth = widthNow;
    // Length changed, user must have zoomed, invoke listeners.
    for (i = zoomListeners.length - 1; i >= 0; --i) {
      zoomListeners[i]();
    }
  }
  setInterval(pollZoomFireEvent, 100);
})();

ça marche pour moi:

        var deviceXDPI = screen.deviceXDPI;
        setInterval(function(){
            if(screen.deviceXDPI != deviceXDPI){
                deviceXDPI = screen.deviceXDPI;
                ... there was a resize ...
            }
        }, 500);

il est seulement nécessaire sur IE8. Tous les autres navigateurs naturellement générer un événement de redimensionnement.

Bonne nouvelle tout le monde certaines personnes! Les nouveaux navigateurs déclencheront un événement de redimensionnement de fenêtre lorsque le zoom est modifié.

il y a un petit plugin construit à partir de yonran qui peut faire la détection. Voici son précédent a répondu question sur StackOverflow. Il fonctionne dans la plupart des navigateurs. L'Application est aussi simple que ceci:

window.onresize = function onresize() {
  var r = DetectZoom.ratios();
  zoomLevel.innerHTML =
    "Zoom level: " + r.zoom +
    (r.zoom !== r.devicePxPerCssPx
        ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx
        : "");
}

Démo

je voudrais suggérer une amélioration à la solution précédente avec le suivi des changements à la largeur de fenêtre. Au lieu de conserver votre propre tableau d'écouteurs d'événements, vous pouvez utiliser le système d'événements javascript existant et déclencher votre propre événement lors d'un changement de largeur, et y lier les gestionnaires d'événements.

$(window).bind('myZoomEvent', function() { ... });

function pollZoomFireEvent() 
{ 

    if ( ... width changed ... ) {
        $(window).trigger('myZoomEvent');
    }
}

accélérateur/déverrouillage peut aider à réduire le taux d'appels de votre conducteur.

sur iOS 10 il est possible d'ajouter un écouteur d'événement à l'événement touchmove et de détecter, si la page est zoomée avec l'événement courant.

var prevZoomFactorX;
var prevZoomFactorY;
element.addEventListener("touchmove", (ev) => {
  let zoomFactorX = document.documentElement.clientWidth / window.innerWidth;
  let zoomFactorY = document.documentElement.clientHeight / window.innerHeight;
  let pageHasZoom = !(zoomFactorX === 1 && zoomFactorY === 1);

  if(pageHasZoom) {
    // page is zoomed
    
    if(zoomFactorX !== prevZoomFactorX || zoomFactorY !== prevZoomFactorY) {
      // page is zoomed with this event
    }
  }
  prevZoomFactorX = zoomFactorX;
  prevZoomFactorY = zoomFactorY;
});

vous pouvez également obtenir le texte redimensionner les événements, et le facteur de zoom en injectant un div contenant au moins un espace non-cassable (éventuellement, caché), et en vérifiant régulièrement sa hauteur. Si la hauteur change, la taille du texte a changé, (et vous savez combien - cela déclenche aussi, soit dit en passant, si la fenêtre est zoomée en mode pleine page, et vous obtiendrez toujours le facteur de zoom correct, avec le même rapport hauteur / hauteur).

<script>
var zoomv = function() {
  if(topRightqs.style.width=='200px){
  alert ("zoom");
  }
};
zoomv();
</script>

bien qu'il s'agisse d'une question vieille de 9 ans, le problème persiste!

j'ai détecté redimensionner tout en excluant zoom dans un projet, donc j'ai édité mon code pour le faire fonctionner pour détecter à la fois redimensionner et zoom exclusif l'un de l'autre. Il fonctionne plus de l'époque, donc, si plus est assez bon pour votre projet, alors cela devrait être utile! Il détecte zoomer 100% du temps dans ce que j'ai testé jusqu'à présent. Le seul problème est que si l'utilisateur devient fou (c'est à dire. spastiquement redimensionner la fenêtre) ou les décalages de la fenêtre il peut tirer comme un zoom au lieu d'une fenêtre redimensionner.

il fonctionne en détectant un changement dans window.outerWidth ou window.outerHeight comme redimensionnement de fenêtre tout en détectant un changement dans window.innerWidth ou window.innerHeight indépendant du redimensionnement de fenêtre comme un zoom.

//init object to store window properties
var windowSize = {
  w: window.outerWidth,
  h: window.outerHeight,
  iw: window.innerWidth,
  ih: window.innerHeight
};

window.addEventListener("resize", function() {
  //if window resizes
  if (window.outerWidth !== windowSize.w || window.outerHeight !== windowSize.h) {
    windowSize.w = window.outerWidth; // update object with current window properties
    windowSize.h = window.outerHeight;
    windowSize.iw = window.innerWidth;
    windowSize.ih = window.innerHeight;
    console.log("you're resizing"); //output
  }
  //if the window doesn't resize but the content inside does by + or - 5%
  else if (window.innerWidth + window.innerWidth * .05 < windowSize.iw ||
    window.innerWidth - window.innerWidth * .05 > windowSize.iw) {
    console.log("you're zooming")
    windowSize.iw = window.innerWidth;
  }
}, false);

Note: ma solution est comme celle de KajMagnus, mais cela a fonctionné mieux pour moi.

j'ai eu ce problème et enfin. J'ai une solution. il est simple et fonctionne pour moi. ("Mozilla / 5.0 (X11; Linux x86_64;Gecko/20100101 Firefox/50.0).

rapport px = rapport du pixel physique au px css. s'il y a un zoom, les px de viewport diminuent et doivent être adaptés à l'écran de sorte que le rapport doit devenir plus grand. mais dans le redimensionnement de la fenêtre, la taille de l'écran diminue aussi bien que les px. donc le ratio se maintiendra.

zoom: déclencheur de windows.redimensionner l'événement -- > et change px_ratio redimensionnement: fenêtres de déclenchement.redimensionner l'événement --> ne change pas px_ratio

//for zoom detection
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

$(window).resize(function(){isZooming();});

function isZooming(){
    var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
    if(newPx_ratio != px_ratio){
        px_ratio = newPx_ratio;
        console.log("zooming");
        return true;
    }else{
        console.log("just resizing");
        return false;
    }
}

je réponds à un lien de 3 ans mais je suppose que voici une réponse plus acceptable,

créer .fichier css comme,

@media screen and (max-width: 1000px) 
{
       // things you want to trigger when the screen is zoomed
}

par exemple:-

@media screen and (max-width: 1000px) 
{
    .classname
    {
          font-size:10px;
    }
}

le code ci-dessus fait la taille de la police '10px' lorsque l'écran est zoomé à environ 125%. Vous pouvez vérifier les différents niveaux de zoom en modifiant la valeur de "1000px'.