JavaScript-Erkennung des Browser-Zoomstatus, Implementierungscode_Javascript-Fähigkeiten

Der hier erwähnte Zoom bezieht sich nicht auf den Zoom der Browsergröße, sondern auf den prozentualen Zoom des Browser-Webseiteninhalts (drücken Sie Strg und die Taste oder - Taste zum Zoomen).
Es gibt viele Möglichkeiten, diesen Zoom zu erkennen. QQ Space verwendet Flash, um zu erkennen, ob der Browser zoomt. Hier ist eine Javascript-Methode zur Erkennung des Browser-Zooms.
Ignorieren Sie es bei IE6 einfach, da IE6 nur Text zoomen kann.
Lassen Sie uns zunächst über die vom Browser bereitgestellte Standarderkennungsschnittstelle sprechen.devicePixelRatio ist das Verhältnis von physischen Pixeln auf dem Gerät zu geräteunabhängigen Pixeln. Dieses Attribut kann verwendet werden, um zu erkennen, ob die Webseite skaliert wurde. Bei normalen PC-Browsern ist der Standardwert 1, standardmäßig ohne Skalierung. Derzeit werden Firefox, Chrome usw. gut unterstützt.
Okay, jetzt ist es an der Zeit, darüber zu sprechen, wie der IE damit umgeht. IE bietet zwei Eigenschaften: window.screen.deviceXDPI und window.screen.logicalXDPI. DeviceXDPI entspricht den physischen Pixeln auf dem Gerät und logicalXDPI entspricht dem Anteil unabhängiger Pixel auf dem Gerät. Es wird geschätzt, dass die Standarderkennungsschnittstelle nur eine Verbesserung basierend auf der IE-Methode darstellt. Der Standardwert dieser beiden Eigenschaften auf Systemen über Windows XP ist 96, da der Systemstandard 96 dpi ist.
Für Browser, die keines der oben genannten unterstützen, können Sie auch die Eigenschaften window.outerWidth und window.innerWidth verwenden. OuterWidth gibt die tatsächliche äußere Breite des Fensterelements zurück, und innerWidth gibt die tatsächliche Innenbreite des Fensterelements zurück. Beide Breiten umfassen die Breite der Bildlaufleiste.
Mit diesen Attributen können Sie grundsätzlich mit gängigen Browsern auf PC-Browsern umgehen. Der Implementierungscode lautet wie folgt:

Wenn der Rückgabewert der Funktion „DetectZoom“ 100 ist, handelt es sich um die Standardzoomstufe. Wenn er größer als 100 ist, wird er vergrößert, und wenn er kleiner als 100 ist, wird er verkleinert.

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

Originalartikel, bitte beim Nachdruck angeben: Nachdruck aus Frontend-Entwicklung