Bildschirm-, Fenster- und Seitengröße in JavaScript: 5 fatale Fehler und wie man sie vermeidet

Größe ist wichtig: Warum Skripte das Layout "zerstören"

Stellen Sie sich vor: Sie entwickeln eine perfekte responsive Website, testen sie auf Ihrem Laptop – alles läuft rund. Sie starten sie auf dem Tablet eines Kunden – ein Fehler. Elemente überlappen sich, das Modal-Fenster verschiebt sich über den Bildschirmrand hinaus, und eine Galerie öffnet sich gar nicht erst. Kommt Ihnen das bekannt vor?

Meistens liegt die Ursache in der falschen Ermittlung der Bildschirm-, Fenster- oder Seitengröße. Die Frage "Get the size of the screen, current web page and browser window" auf Stack Overflow hat Hunderttausende von Aufrufen. Und das ist kein Zufall: Selbst erfahrene Entwickler verwechseln screen.width, window.innerWidth und document.documentElement.clientWidth.

In diesem Artikel analysieren wir die 5 häufigsten Fehler, die Anfänger (und nicht nur sie) bei der Arbeit mit Größen in JavaScript machen. Sie erhalten nicht nur die Theorie, sondern auch fertige, erprobte Lösungen für reale Aufgaben.

Top-5-Fehler bei der Arbeit mit Größen in JavaScript

Fehler Nr. 1: screen.width anstelle von window.innerWidth verwenden

Das ist ein Klassiker. Ein Entwickler möchte die Breite des Viewports ermitteln und schreibt:

// ❌ Falsch\nconst viewportWidth = screen.width;\nconsole.log(viewportWidth); // 1920 (aber das ist nicht der Viewport!)\n

Wo liegt der Haken? screen.width gibt die physische Breite des Monitors in Pixeln zurück. Sie ändert sich nicht, wenn Sie das Browserfenster verkleinern oder die Entwicklertools öffnen. window.innerWidth hingegen ist die Breite des Viewports, also des Teils des Fensters, in dem der Inhalt angezeigt wird.

Wann zerstört das die Website? Wenn Sie responsive Blöcke basierend auf screen.width berechnen, passt sich die Website beim Öffnen der DevTools oder beim Verkleinern des Fensters nicht an. Der Benutzer sieht entweder leere Flächen oder überlappende Elemente.

// ✅ Richtig\nconst viewportWidth = window.innerWidth;\nconsole.log(viewportWidth); // Aktuelle Breite des sichtbaren Bereichs\n

Fehler Nr. 2: Die Bildlaufleiste (Scrollbar) vergessen

Die zweithäufigste Falle. Ein Entwickler ermittelt die Fensterhöhe und versucht, ein Element genau in der Mitte zu platzieren:

// ❌ Falsch\nconst windowHeight = window.innerHeight;\nelement.style.top = windowHeight / 2 + 'px';\n

Auf den ersten Blick scheint alles richtig. Aber wenn der Inhalt länger als der Bildschirm ist und eine Bildlaufleiste vorhanden ist, bezieht window.innerHeight deren Höhe mit ein. Dadurch kann das Element über die untere Grenze des sichtbaren Bereichs hinaus "verschoben" werden.

Lösung: Verwenden Sie document.documentElement.clientHeight – es gibt die Viewport-Höhe ohne die Bildlaufleiste zurück.

// ✅ Richtig für die Positionierung im sichtbaren Bereich\nconst viewportHeight = document.documentElement.clientHeight;\nelement.style.top = viewportHeight / 2 + 'px';\n

\n

Merken Sie sich die Regel: window.innerWidth/innerHeight – inklusive Scrollbalken. document.documentElement.clientWidth/clientHeight – exklusive Scrollbalken. Wählen Sie je nach Aufgabe.

\n

Fehler Nr. 3: Fenstergröße und Seitengröße verwechseln

Sie möchten wissen, wie weit der Benutzer gescrollt hat, und berechnen die Gesamthöhe der Seite:

// ❌ Falsch\nconst pageHeight = window.innerHeight;\nconsole.log(pageHeight); // Das ist nicht die Seitenhöhe!\n

window.innerHeight ist die Höhe des Fensters, nicht des Dokuments. Um die vollständige Seitenhöhe (einschließlich des gescrollten Teils) zu erhalten, müssen Sie document.documentElement.scrollHeight verwenden.

Praktisches Beispiel: Sie erstellen einen unendlichen Feed (Infinite Scroll). Wenn Sie window.innerHeight verwenden, um den Zeitpunkt zum Nachladen neuer Beiträge zu bestimmen, wird das Skript einmal ausgeführt und dann nicht mehr