Window.resizeTo() — Methode · JavaScript-Referenz

Signatur

Window.prototype.resizeTo(width, height)

Beschreibung

window.resizeTo() ändert die äußere Größe eines Fensters, also inklusive Werkzeugleisten, Fensterrahmen und Scrollleisten, auf die angegebenen absoluten Werte in CSS-Pixeln. Anders als resizeBy(), das die Größe relativ ändert, setzt resizeTo() die Zielgröße direkt. Nach dem Aufruf entsprechen die Werte ungefähr window.outerWidth und window.outerHeight.

Moderne Browser lassen die Methode aus Sicherheits- und Nutzbarkeitsgründen nur unter strengen Bedingungen zu:

Das Fenster muss per window.open() als eigenständiges Popup geöffnet worden sein, nicht als Tab.
Das Fenster darf nur einen einzigen Tab enthalten.
Das Skript muss aus demselben Ursprung stammen wie das Fenster (Same-Origin), wenn die Größe von außen gesteuert wird.

Typische Einsatzfälle sind Hilfsfenster wie Druckvorschauen, OAuth-Anmeldedialoge oder Werkzeugpaletten in Webanwendungen, die du selbst öffnest und deren Größe du anpassen willst, etwa wenn sich der Inhalt ändert. Die Methode ist für normale Hauptfenster ungeeignet, denn dort wird der Aufruf einfach stillschweigend ignoriert.

Parameter

Name	Typ	Default	Beschreibung
$width Pflicht	number		Neue äußere Breite des Fensters in CSS-Pixeln (Ganzzahl). Der Browser erzwingt eine Mindestgröße, meist etwa 100 px.
$height Pflicht	number		Neue äußere Höhe des Fensters in CSS-Pixeln (Ganzzahl). Auch hier gilt eine Mindestgröße, die der Browser festlegt.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Ob die Größenänderung wirklich stattgefunden hat, lässt sich nur über outerWidth/outerHeight oder das resize-Event prüfen.

Beispiele

Popup öffnen und auf feste Größe setzen

const btn = document.querySelector('#hilfe-oeffnen');

btn.addEventListener('click', () => {
  // Popup mit features-String öffnen, damit es kein Tab wird
  const popup = window.open('/hilfe.html', 'hilfe', 'popup,width=400,height=300');
  if (!popup) {
    console.warn('Popup wurde blockiert');
    return;
  }
  // Später vergrößern, z. B. nach dem Laden
  popup.addEventListener('load', () => {
    popup.resizeTo(800, 600);
    console.log(popup.outerWidth, popup.outerHeight);
  });
});

800 600 (ungefähr, je nach Browser)

Popup auf die Hälfte des Bildschirms setzen

// Code läuft INNERHALB eines per window.open() geöffneten Popups
const halbeBreite = Math.round(screen.availWidth / 2);
const volleHoehe = screen.availHeight;

window.resizeTo(halbeBreite, volleHoehe);
window.moveTo(0, 0); // an den linken Rand schieben

Prüfen, ob die Größenänderung erlaubt wurde

const tryResize = (win, w, h) => {
  const vorher = [win.outerWidth, win.outerHeight];
  win.resizeTo(w, h);
  // Manche Browser wenden die Änderung asynchron an
  setTimeout(() => {
    const geaendert = win.outerWidth !== vorher[0] || win.outerHeight !== vorher[1];
    console.log(geaendert ? 'Größe geändert' : 'resizeTo() wurde ignoriert');
  }, 100);
};

tryResize(window, 1024, 768);

resizeTo() wurde ignoriert (bei einem normalen Browser-Tab)

// Wichtig · Fallstricke

Stillschweigendes Ignorieren: In normalen Tabs oder Hauptfenstern machen Chrome, Firefox, Safari und Edge beim Aufruf nichts und werfen auch keinen Fehler. Firefox erlaubt seit Version 7 kein Verkleinern bzw. Vergrößern von Fenstern, die nicht per window.open() erzeugt wurden oder mehrere Tabs enthalten.
Mobile Browser: Auf Smartphones und Tablets hat die Methode praktisch keine Wirkung, weil Fenster dort immer Vollbild sind.
Äußere statt innere Größe: Die Werte gelten inklusive Browser-Chrome. Soll der sichtbare Inhaltsbereich eine bestimmte Größe haben, musst du die Differenz outerWidth - innerWidth selbst ausrechnen und aufaddieren.
Grenzen: Der Browser begrenzt die Größe auf den verfügbaren Bildschirmbereich (screen.availWidth/availHeight) und erzwingt eine Mindestgröße.
Cross-Origin: Hat das Popup inzwischen einen fremden Ursprung aufgerufen, kann das öffnende Fenster seine Größe nicht mehr ändern.
Browser können die Funktion auch über Nutzereinstellungen komplett abschalten. Gestalte die Oberfläche deshalb immer so, dass sie auch ohne resizeTo() funktioniert.

Siehe auch

Window.resizeBy() Window.moveTo() Window.moveBy() Window.open() Window.outerWidth Window.outerHeight