# Eine Größenänderung als kontrollierten Layoutwechsel behandeln

> Halte Spielkoordinaten, Canvas-Abmessungen und Layout synchron, wenn Spielende das Fenster oder die Ausrichtung ändern.

- URL: https://oneshotgems.ai/de/topics/game-resize-handling
- Kategorie: Für Spieleentwickler
- Typ: Ratgeber
- Aktualisiert: 5. Oktober 2026

Ein Browsergame kann seine Größe ändern, wenn sich das Fenster ändert, ein Gerät gedreht wird, Browsersteuerelemente erscheinen oder sich das Seitenlayout verschiebt. Wird das Canvas vergrößert oder verkleinert, ohne den internen Zeichenpuffer und die Eingabezuordnung anzupassen, kann das Bild gestreckt werden und ein Klick an einer anderen Stelle ankommen. Behandle die Größe als Eingabe für Layout und Rendering und aktualisiere davon abhängige Systeme gemeinsam. Eine Größenänderung sollte weder den Spielfortschritt zurücksetzen noch bei jeder kleinen Messschwankung wiederholt aufwendige Arbeit auslösen.

## Das Element beobachten, das das Spiel tatsächlich verwendet

Verwende ResizeObserver, wenn sich der Canvas-Container unabhängig vom Fenster ändern kann, etwa in einem geteilten Bereich oder auf einer Seite mit wechselnden Steuerelementen. Lies die Inhaltsgröße aus, aktualisiere die interne Canvas-Auflösung nur bei einer tatsächlichen Änderung und berechne den Maßstab zwischen CSS- und Spielweltkoordinaten neu.

Schreibe layoutwirksame Abmessungen nicht ohne Schutzbedingung in dasselbe beobachtete Element zurück. MDN weist darauf hin, dass eine Größenänderung in einem Observer-Callback eine Schleife auslösen kann. Plane die Arbeit sorgfältig und überspringe Schreibvorgänge, wenn sich die erwartete Größe nicht geändert hat. Trenne den Spiel-Viewport vom festen Weltkoordinatensystem, wenn das Layout die Darstellung durch Balken ergänzen statt verzerren soll.

## Layout und Eingabe gemeinsam testen

Klicke oder tippe bei schmaler, breiter und gedrehter Ansicht auf ein Ziel nahe jeder Canvas-Kante. Prüfe, ob das Spiel dieselbe Weltposition erkennt, die durch die sichtbare Markierung angezeigt wird. Ändere die Größe während eines laufenden Levels und kontrolliere, ob Kamera oder Balkenstrategie greift, ohne Positionen unerwartet zu verschieben.

Beobachte den Container, statt anzunehmen, dass window.innerWidth jede Layoutänderung erfasst. Wenn eine mobile Tastatur oder die Browseroberfläche den verfügbaren Platz verändert, entscheide, ob das Spielfeld kleiner werden, seine Größe behalten oder scrollen soll. Teste das mit eingeblendeten Steuerelementen, denn sie können Platz beanspruchen, den das Spiel benötigt.

## Fragen

**Muss sich die Größe der Spielwelt bei jeder Größenänderung ändern?** Nein. Viele Spiele behalten feste Weltkoordinaten bei und ändern nur die Kamera oder ergänzen Balken. Eine Änderung der Weltgröße selbst kann Schwierigkeit, Kollisionen und Levelaufbau beeinflussen.

**Wann ist ResizeObserver einem Fenster-Resize-Handler vorzuziehen?** Verwende ResizeObserver, wenn sich die Größe des relevanten Elements durch seinen Container oder das umgebende Layout ändern kann, auch wenn die Gesamtgröße des Fensters gleich bleibt.

## Folge deiner Neugier

- [Die Canvas-Auflösung für scharfe Spielgrafik einstellen](https://oneshotgems.ai/de/topics/canvas-pixel-density): Bringen Sie die Auflösung der Leinwandunterlage, das Pixelverhältnis des Geräts, die Speichernutzung und die Zeichenkosten in Einklang, wenn ein Spiel auf allen Bildschirmen klar aussehen muss.
- [Finden Sie Canvas-Rendering-Engpässe](https://oneshotgems.ai/de/topics/canvas-game-performance): Erstellen Sie ein Leistungsprofil für ein 2D-Canvas-Spiel mit reproduzierbaren Szenen. Reduzieren Sie aufwendige Zeichenarbeit erst, nachdem Sie gemessen haben, wofür die Frame-Zeit verwendet wird.

## Weiterlesen

- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

---
Kanonische Seite: https://oneshotgems.ai/de/topics/game-resize-handling