ScreenDetails

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Das ScreenDetails-Interface der Window Management API repräsentiert die Details aller Bildschirme, die dem Gerät des Benutzers zur Verfügung stehen.

Diese Informationen werden über die Methode Window.getScreenDetails() abgerufen.

Hinweis:>ScreenDetails ist ein dynamisches Objekt, das sich aktualisiert, wenn sich die verfügbaren Bildschirme ändern. Sie können daher dasselbe Objekt weiterhin abfragen, um aktualisierte Werte zu erhalten, anstatt getScreenDetails() wiederholt aufzurufen.

EventTarget ScreenDetails

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, EventTarget.

currentScreen Schreibgeschützt

Ein einzelnes ScreenDetailed-Objekt, das detaillierte Informationen über den Bildschirm darstellt, auf dem das aktuelle Browserfenster angezeigt wird.

screens Schreibgeschützt

Ein Array von ScreenDetailed-Objekten, von denen jedes detaillierte Informationen über einen bestimmten Bildschirm enthält, der dem Gerät des Benutzers zur Verfügung steht.

Hinweis:>screens umfasst nur "erweiterte" Displays, nicht solche, die ein anderes Display spiegeln.

Ereignisse

currentscreenchange

Wird ausgelöst, wenn sich der aktuelle Bildschirm des Fensters in irgendeiner Weise ändert - zum Beispiel verfügbare Breite oder Höhe, oder Ausrichtung.

screenschange

Wird ausgelöst, wenn Bildschirme mit dem System verbunden oder davon getrennt werden.

Beispiele

Hinweis: Siehe Lernumgebung für mehrere Fenster für ein vollständiges Beispiel (siehe auch den Quellcode).

Zugriff auf grundlegende Bildschirminformationen

Wenn Window.getScreenDetails() aufgerufen wird, wird der Benutzer um Erlaubnis gebeten, Fenster auf allen seinen Bildschirmen zu verwalten (der Status dieser Berechtigung kann überprüft werden, indem Permissions.query() abgefragt wird, um window-management zu überprüfen). Wenn der Benutzer die Erlaubnis erteilt, wird ein ScreenDetails-Objekt zurückgegeben. Dieses Objekt enthält Details zu allen Bildschirmen, die dem System des Benutzers zur Verfügung stehen.

Das untenstehende Beispiel öffnet ein Fenster in voller Größe auf jedem verfügbaren Display.

js
const screenDetails = await window.getScreenDetails();

// Open a window on each screen of the device
for (const screen of screenDetails.screens) {
  openWindow(
    screen.availLeft,
    screen.availTop,
    screen.availWidth,
    screen.availHeight,
    url,
  );
}

Reagieren auf Änderungen bei verfügbaren Bildschirmen

Sie könnten das screenschange-Ereignis verwenden, um zu erkennen, wann sich die verfügbaren Bildschirme geändert haben (vielleicht wenn ein Bildschirm angeschlossen oder abgetrennt wird), die Änderung zu melden und die Fensteranordnung an die neue Konfiguration anzupassen:

js
const screenDetails = await window.getScreenDetails();

// Return the number of screens
let noOfScreens = screenDetails.screens.length;

screenDetails.addEventListener("screenschange", () => {
  // If the new number of screens is different to the old number of screens,
  // report the difference
  if (screenDetails.screens.length !== noOfScreens) {
    console.log(
      `The screen count changed from ${noOfScreens} to ${screenDetails.screens.length}`,
    );

    // Update noOfScreens value
    noOfScreens = screenDetails.screens.length;
  }

  // Open, close, or rearrange windows as needed,
  // to fit the new screen configuration
  updateWindows();
});

Spezifikationen

Specification
Window Management
# api-screendetails-interface

Browser-Kompatibilität

Siehe auch