Window.outerWidth — Eigenschaft · JavaScript-Referenz

Signatur

Window.outerWidth

Beschreibung

Die schreibgeschützte Eigenschaft window.outerWidth gibt die Breite des gesamten Browserfensters zurück. Anders als window.innerWidth, das nur den Viewport inklusive vertikalem Scrollbalken misst, zählen hier auch Fensterrahmen, Größenziehgriffe und seitlich angedockte Elemente mit, etwa Lesezeichen- oder Entwickler-Seitenleisten.

Der Wert ist eine ganze Zahl in CSS-Pixeln, er hängt also vom Zoomfaktor ab. Wird die Seite vergrößert, sinkt outerWidth, obwohl sich die tatsächliche Fenstergröße auf dem Bildschirm nicht ändert.

Typische Einsatzfälle sind das Positionieren oder Zentrieren von Pop-up-Fenstern mit window.open(), das Erkennen, ob ein seitlich angedocktes Entwicklerwerkzeug geöffnet ist (Differenz zu innerWidth), und das Erfassen von Fenstergrößen für Diagnose- oder Telemetriezwecke. Für responsives Layout ist outerWidth dagegen nicht geeignet, dafür gibt es innerWidth, document.documentElement.clientWidth oder CSS-Media-Queries.

Um die Fenstergröße zu ändern, benutzt man window.resizeTo() oder window.resizeBy(). Die Eigenschaft selbst ist schreibgeschützt.

Rückgabewert

Typ

number

Beschreibung

Ganzzahlige Breite des äußeren Browserfensters in CSS-Pixeln, also inklusive Fensterrahmen und Seitenleisten.

Beispiele

Äußere und innere Breite vergleichen

const aussen = window.outerWidth;
const innen = window.innerWidth;

console.log(`Fenster: ${aussen}px, Viewport: ${innen}px`);
console.log(`Rahmen/Seitenleisten: ${aussen - innen}px`);

Fenster: 1440px, Viewport: 1424px Rahmen/Seitenleisten: 16px

Pop-up zentriert über dem aktuellen Fenster öffnen

const openCenteredPopup = (url, width = 500, height = 600) => {
  // Position relativ zum aktuellen Fenster berechnen
  const left = window.screenX + (window.outerWidth - width) / 2;
  const top = window.screenY + (window.outerHeight - height) / 2;

  return window.open(
    url,
    'login',
    `width=${width},height=${height},left=${Math.round(left)},top=${Math.round(top)}`
  );
};

document.querySelector('#login-btn')?.addEventListener('click', () => {
  openCenteredPopup('https://example.com/oauth');
});

Seitlich angedockte DevTools grob erkennen

const SCHWELLE = 160; // Pixel

const pruefeSeitenleiste = () => {
  const differenz = window.outerWidth - window.innerWidth;
  const vermutlichOffen = differenz > SCHWELLE;
  console.log(`Differenz: ${differenz}px – Seitenleiste offen: ${vermutlichOffen}`);
};

window.addEventListener('resize', pruefeSeitenleiste);
pruefeSeitenleiste();

Differenz: 16px – Seitenleiste offen: false

// Wichtig · Fallstricke

Zoom-Abhängigkeit: Der Wert wird in CSS-Pixeln angegeben. Bei 200 % Zoom ist outerWidth ungefähr halb so groß. Für echte Gerätepixel multipliziert man mit window.devicePixelRatio, das Ergebnis ist trotzdem nur eine Näherung.
Nicht für Layout verwenden: Media-Queries und innerWidth beziehen sich auf den Viewport. outerWidth weicht davon je nach Betriebssystem, Rahmen und Seitenleisten ab.
Mobile Browser: Auf Smartphones und Tablets ist der Wert oft identisch mit innerWidth oder der Bildschirmbreite. Manche ältere mobile Browser liefern 0 oder Gerätepixel.
iframes: Auch innerhalb eines iframes liefert outerWidth die Breite des obersten Browserfensters, nicht die des iframes.
DevTools-Erkennung: Die Differenz zu innerWidth taugt nur als grobe Schätzung. Losgelöste DevTools-Fenster werden so nicht erkannt. Als Sicherheitsmechanismus ist das ungeeignet.
Datenschutz: Fenstermaße tragen zum Browser-Fingerprinting bei. Einige Browser (z. B. Tor Browser, Firefox mit resistFingerprinting) runden sie oder setzen sie gleich innerWidth.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Zum Überwachen von Größenänderungen hört man auf das resize-Event.

Siehe auch

Window.outerHeight Window.innerWidth Window.innerHeight Window.screenX Window.devicePixelRatio Window.resizeTo() Window.open()