Détection JavaScript de l'état de zoom du navigateur, implémentation des compétences code_javascript

Le zoom mentionné ici ne fait pas référence au zoom de la taille du navigateur, mais fait référence au pourcentage de zoom du contenu de la page Web du navigateur (appuyez sur Ctrl et sur la touche ou - pour zoomer).
Il existe de nombreuses façons de détecter ce zoom. QQ Space utilise Flash pour détecter si le navigateur effectue un zoom. Voici une méthode javascript pour détecter le zoom du navigateur.
Pour IE6, ignorez-le simplement, car IE6 ne peut zoomer que sur le texte.
Parlons d'abord de l'interface de détection standard fournie par le navigateur. window.devicePixelRatio est le rapport entre les pixels physiques de l'appareil et les pixels indépendants de l'appareil. Cet attribut peut être utilisé pour détecter si la page Web a été mise à l'échelle. Sur les navigateurs PC normaux, la valeur par défaut est 1 sans mise à l'échelle par défaut. Actuellement, Firefox, Chrome, etc. sont bien pris en charge.
D'accord, il est maintenant temps de parler de la façon dont IE gère cela. IE fournit deux propriétés : window.screen.deviceXDPI et window.screen.logicalXDPI deviceXDPI correspond aux pixels physiques de l'appareil, et logicalXDPI correspond à la proportion de pixels indépendants sur l'appareil. On estime que l'interface de détection standard n'est qu'une amélioration basée sur la méthode IE. La valeur par défaut de ces deux propriétés sur les systèmes supérieurs à Windows XP est 96, car la valeur par défaut du système est 96 dpi.
Pour les navigateurs qui ne prennent en charge aucun des éléments ci-dessus, vous pouvez également utiliser les propriétés window.outerWidth et window.innerWidth. externalWidth renvoie la largeur extérieure réelle de l'élément window et innerWidth renvoie la largeur intérieure réelle de l'élément window. Les deux largeurs incluent la largeur de la barre de défilement.
Avec ces attributs, vous pouvez essentiellement gérer les navigateurs courants sur les navigateurs PC. Le code d'implémentation est le suivant :

Si la valeur de retour de la fonction detectorZoom est 100, c'est le niveau de zoom par défaut, s'il est supérieur à 100, il est zoomé, et s'il est inférieur à 100, il est dézoomé.

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;
};

Article original, veuillez l'indiquer lors de la réimpression : Réimprimé de Développement front-end