Kann JavaScript die Zoomstufe des Browsers erkennen?

Nein, eigentlich nicht.

Meine erste Vermutung war, dass dies absichtlich nicht in Browsern verfügbar gemacht wurde, weil Browser absichtlich nicht wollen, dass wir uns damit herumschlagen – oder gut gemeinte, aber schlecht ausgehende Entscheidungen auf Basis dieser Informationen treffen. Aber ich sehe dafür keine Beweise.

StackOverflow-Antworten zeigen, wie seltsam browserspezifisch das sein kann. Dieses Skript von 2013 funktioniert für mich in Chrome, aber überhaupt nicht in Safari und meldet in Firefox falsche Ergebnisse. Selbst wenn dieses Skript funktionieren würde, basiert es auf User-Agent-Erkennung (die nicht mehr lange existieren wird) und einigen unglaublich seltsamen Hacks.

Bitte korrigieren Sie mich, wenn ich falsch liege, aber ich denke, die Antwort ist, dass wir das im Moment nicht wirklich tun können.

Es gibt die Visual Viewport API

Ich bin irgendwie verwirrt davon.

• Die Spezifikation ist ein Entwurf
• Die Kompatibilitätstabelle listet viel Unterstützung auf
• window.visualViewport ist in Firefox, Safari und Chrome (Desktop) definiert
• Aber… window.visualViewport.scale ist in Safari und Chrome immer 1 und in Firefox undefined. Mit anderen Worten: nutzlos.

Ich weiß nicht genau, ob das die Browser-Zoomstufe *genau* darstellen soll, denn die Spezifikation spricht speziell über Pinch-Zoom. Es ist also vielleicht einfach nicht für Desktop-Browser-Zoomstufen gedacht.

Was ist ein Anwendungsfall hierfür?

Ein Kerl hat mir eine Situation wie diese geschildert

Er wollte CSS Grid verwenden, um Friedhofsflächen (schon interessant) wie einen von oben nach unten gerichteten Grundriss eines Friedhofs zu gestalten. Es gab viele Informationen im Layout. Wenn man "herausgezoomt" war, um den gesamten Friedhof auf einer Seite zu sehen, war der Text in jedem Bereich zu klein zum Lesen (da die Schriftgröße so eingestellt war, dass sie in die Kästchen/Gräber passte). Idealerweise würde die Seite diesen Text ausblenden, wenn der Browser herausgezoomt ist (vielleicht eine Klasse .hide-text). Wenn man weit genug hineingezoomt hat, wird der Text wieder angezeigt.

Wie zum Beispiel...

// Dunno if "resize" is best. I don't know what the "change zoom" event would be
window.visualViewport.addEventListener("resize", viewportHandler);
function viewportHandler(event) {
  // NOTE: This doesn't actually work at time of writing
  if (event.target.scale > 3) {
    document.body.classList.remove("hide-text");  
  } else {
    document.body.classList.add("hide-text");
  }
}

Es gibt die Pixeldichte...

Ben Nadel hat kürzlich gebloggt: Betrachtung, wie der Browser-Zoom CSS-Medienabfragen und Pixeldichte beeinflusst.

Wenn man sich window.devicePixelRatio ansieht und hineinzoomt, erhöht sich die Pixeldichte in Chrome und Firefox beim Hineinzoomen und verringert sich beim Herauszoomen. Theoretisch könnte man den ursprünglichen Wert testen (er könnte für Benutzer mit unterschiedlichen Bildschirmen an verschiedenen Stellen beginnen) und Änderungen dieses Wertes verwenden, um den Zoom zu erraten. *Aber…* in Safari tut sich nichts, d. h., er bleibt unabhängig vom Zoom gleich. Außerdem kann die Zoomstufe des Betriebssystems hier Dinge beeinflussen, was es noch komplizierter macht; ganz zu schweigen davon, dass eine Seite *mit einer bereits vorhandenen Zoomstufe* beginnen könnte, was die gesamte Berechnung von Anfang an durcheinanderbringen könnte.