Attraper le navigateur ' événement de s « zoom » en JavaScript

Question

Est-il possible de détecter, à l’aide de JavaScript, lorsque l’utilisateur modifie le zoom dans une page ? Je tiens simplement à capturer un événement « zoom » et d’y répondre (semblable à l’événement window.onresize).

Merci.

Answer 1

Il n'y a aucun moyen de activement détecter si il y a un zoom. J'ai trouvé un bon point d'entrée ici sur la façon dont vous pouvez tenter de la mettre en œuvre.

J'ai trouvé deux façons de détecter la le niveau de zoom. Un moyen de détecter zoom les changements de niveau repose sur le fait que les valeurs en pourcentage sont pas agrandie. Un la valeur en pourcentage par rapport à la fenêtre d'affichage de la largeur, et donc pas affectés par zoom de la page. Si vous insérez deux éléments, l'un avec une position en pourcentages, et l'autre avec la même position dans pixels, ils vont se déplacer en dehors lors de la la page est agrandie. Trouver le rapport entre les positions de ces deux éléments et vous avez le niveau de zoom. Voir l'essai cas. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

Vous pouvez également le faire en utilisant les outils de la post ci-dessus. Le problème est que vous êtes plus ou moins de faire des suppositions éclairées sur si oui ou non la page a changé de plan. Cela fonctionne mieux dans certains navigateurs que les autres.

Il n'y a aucun moyen de savoir si la page est agrandie, s'ils le chargement de votre page pendant le zoom.

Answer 2

Je suis l'aide de cette pièce de JavaScript pour réagir à Zoom "événements".
Il interroge la largeur de la fenêtre. (Un peu comme suggéré sur cette page (qui Ian Elliott lié à): http://novemberborn.net/javascript/page-zoom-ff3 [archive])

Testé avec Chrome, Firefox 3.6 et à l'Opéra, pas IE.

En Ce Qui Concerne, 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);
})();

Answer 3

Cela fonctionne pour moi :

Il est seulement nécessaire sur IE8. Tous les autres navigateurs naturellement génèrent un événement resize.

Answer 4

Il y a un chouette plugin construit à partir de `` qui peut faire la détection. Voici son a répondu à la question précédemment sur StackOverflow. Cela fonctionne pour la plupart des navigateurs. L’application est aussi simple que cela :

Démo

Answer 5

Je voudrais suggérer une amélioration à la solution précédente avec le suivi des modifications à la largeur de la fenêtre. Au lieu de garder votre propre tableau des écouteurs d’événements vous pouvez utiliser le système d’événement javascript existant et déclencher votre propre événement lorsqu’elles changent de largeur et le lier des gestionnaires d’événements.

Manette des gaz/debounce peut aider à réduire le taux d’appels de votre gestionnaire.