ScreenDetailed.left — Eigenschaft · JavaScript-Referenz

Signatur

ScreenDetailed.left

Beschreibung

Die Eigenschaft left eines ScreenDetailed-Objekts gibt an, wo der linke Rand des gesamten Bildschirmbereichs im virtuellen Arbeitsbereich des Systems liegt. Dieser Arbeitsbereich fasst alle angeschlossenen Monitore zu einem gemeinsamen Koordinatensystem zusammen. Der Ursprung (0, 0) ist normalerweise die linke obere Ecke des primären Bildschirms. Ein Monitor links vom Hauptbildschirm hat deshalb einen negativen left-Wert.

Der Wert ist gleichbedeutend mit dem (nicht standardisierten) Screen.left bzw. mit ScreenDetailed.availLeft ohne Abzug von Taskleisten und Docks. left beschreibt also immer den ganzen Bildschirm. Wenn du wissen willst, wo der tatsächlich nutzbare Bereich beginnt, nimm availLeft.

In der Praxis brauchst du left zusammen mit top, width und height, um Fenster gezielt auf einem bestimmten Monitor zu öffnen oder zu verschieben, etwa mit window.open() und den Optionen left/top oder mit window.moveTo(). Typische Einsatzfälle sind Präsentationssoftware, Handelsplattformen mit mehreren Monitoren und Kiosk- oder Steuerungsanwendungen.

Ein ScreenDetailed-Objekt bekommst du nur über window.getScreenDetails(). Dafür muss der Nutzer die Berechtigung window-management erteilen.

Rückgabewert

Typ

number

Beschreibung

Die x-Koordinate des linken Bildschirmrands im virtuellen Mehrbildschirm-Koordinatensystem, in CSS-Pixeln. Der Wert kann negativ sein.

Beispiele

Position aller Bildschirme ausgeben

const listScreens = async () => {
  if (!('getScreenDetails' in window)) {
    console.log('Window Management API nicht verfügbar');
    return;
  }
  const details = await window.getScreenDetails();
  for (const screen of details.screens) {
    console.log(`${screen.label}: left=${screen.left}, top=${screen.top}, ${screen.width}x${screen.height}`);
  }
};

listScreens();

Eingebauter Bildschirm: left=0, top=0, 1920x1080 DELL U2720Q: left=-2560, top=0, 2560x1440

Fenster auf dem Bildschirm ganz rechts öffnen

const openOnRightmostScreen = async (url) => {
  const { screens } = await window.getScreenDetails();
  // Bildschirm mit dem größten left-Wert suchen
  const target = screens.reduce((a, b) => (b.left > a.left ? b : a));
  const features = [
    `left=${target.left}`,
    `top=${target.top}`,
    `width=${target.width}`,
    `height=${target.height}`
  ].join(',');
  return window.open(url, '_blank', features);
};

document.querySelector('#present').addEventListener('click', () => {
  openOnRightmostScreen('/praesentation.html');
});

left und availLeft vergleichen

const showTaskbarOffset = async () => {
  const { currentScreen } = await window.getScreenDetails();
  const offset = currentScreen.availLeft - currentScreen.left;
  console.log(`Gesamter Bildschirm beginnt bei x=${currentScreen.left}`);
  console.log(`Nutzbarer Bereich beginnt bei x=${currentScreen.availLeft}`);
  console.log(`Seitliche Taskleiste/Dock: ${offset}px`);
};

showTaskbarOffset();

Gesamter Bildschirm beginnt bei x=0 Nutzbarer Bereich beginnt bei x=48 Seitliche Taskleiste/Dock: 48px

Auf Änderungen der Bildschirmanordnung reagieren

const watchLayout = async () => {
  const details = await window.getScreenDetails();
  details.addEventListener('screenschange', () => {
    const positions = details.screens.map((s) => s.left);
    console.log('Neue left-Werte:', positions);
  });
};

watchLayout();

Neue left-Werte: [0, 1920]

// Wichtig · Fallstricke

Berechtigung nötig: window.getScreenDetails() fragt nach der Berechtigung window-management (früher window-placement). Lehnt der Nutzer ab, wird das Promise mit einem Fehler abgelehnt. Fange das mit try/catch ab und prüfe den Stand vorher mit navigator.permissions.query({ name: 'window-management' }).
Negative Werte: Bildschirme links vom primären Monitor haben negative left-Werte. Setze in Berechnungen also nicht voraus, dass der Wert >= 0 ist.
Nicht mit availLeft verwechseln: left berücksichtigt keine Taskleisten oder Docks. Wenn du Fenster platzierst, ist availLeft meist der bessere Wert.
Einheit: Der Wert ist in CSS-Pixeln angegeben, nicht in Gerätepixeln. Bei Monitoren mit unterschiedlichem devicePixelRatio kann das Koordinatensystem vom Betriebssystem abweichen.
Kompatibilität: Nur in Chromium-basierten Browsern (ab Version 100). Firefox und Safari unterstützen die API nicht. Prüfe die Verfügbarkeit per Feature-Erkennung mit 'getScreenDetails' in window.
Nur in einem sicheren Kontext (HTTPS) verfügbar. In iframes kann die Permissions Policy window-management den Zugriff sperren.
Der Wert ist schreibgeschützt. Wenn du ihm etwas zuweist, wird das stillschweigend ignoriert.

Siehe auch

Window.open() PerformanceTiming.loadEventEnd ScreenDetailed.label ScreenDetailed.top ScreenDetailed.availLeft