JavaScript-Dimensionen von Bildschirm, Fenster und Webseite

Die genaue Bestimmung der Abmessungen des Bildschirms, des Browserfensters und des Webseiteninhalts Ihres Benutzers ist entscheidend für die Erstellung responsiver und benutzerfreundlicher Webanwendungen. Dieser Leitfaden verdeutlicht die Unterschiede zwischen diesen drei Konzepten und bietet zuverlässige JavaScript-Methoden zum Abrufen ihrer jeweiligen Größen.

Inhaltsverzeichnis

1. Verständnis der Unterschiede zwischen Bildschirm-, Fenster- und Webseitenabmessungen
2. Abrufen von Bildschirm-, Fenster- und Webseitenabmessungen mit JavaScript

Verständnis der Unterschiede zwischen Bildschirm-, Fenster- und Webseitenabmessungen

Bevor wir uns in den Code stürzen, wollen wir klare Definitionen festlegen:

• Bildschirm: Stellt den gesamten physischen Anzeigebereich des Geräts des Benutzers dar. Seine Abmessungen spiegeln die Gesamtpixelanzahl des Monitors wider.
• Fenster: Bezieht sich auf das Browserfenster selbst – den Bereich, in dem Ihre Webseite angezeigt wird. Die Fenstergröße kann kleiner als die Bildschirmgröße sein, wenn der Browser nicht maximiert ist. Es schließt den Browser-Chrome (Symbolleisten, Menüs usw.) aus.
• Webseite (Dokument): Umfasst den gerenderten Inhalt Ihrer Webseite. Seine Abmessungen hängen von der Größe, dem Layout und dem Stil des Inhalts ab. Es kann kleiner oder größer als das Browserfenster sein (was zu Bildlaufleisten führt).

Abrufen von Bildschirm-, Fenster- und Webseitenabmessungen mit JavaScript

So erhalten Sie diese Abmessungen mithilfe von JavaScript:

1. Bildschirmgröße

const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

console.log(`Bildschirmbreite: ${screenWidth} Pixel`);
console.log(`Bildschirmhöhe: ${screenHeight} Pixel`);

2. Fenstergröße

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

console.log(`Fensterbreite: ${windowWidth} Pixel`);
console.log(`Fensterhöhe: ${windowHeight} Pixel`);

3. Webseiten-(Dokument-)Größe

Die Bestimmung der genauen Abmessungen der Webseite erfordert aufgrund von Browserinkonsistenzen einen robusteren Ansatz. Die folgende Funktion behandelt verschiedene Szenarien:

function getDocumentSize() {
  const body = document.body;
  const html = document.documentElement;

  const docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
  const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

  return { width: docWidth, height: docHeight };
}

const documentSize = getDocumentSize();
console.log(`Dokumentbreite: ${documentSize.width} Pixel`);
console.log(`DokumentHöhe: ${documentSize.height} Pixel`);

Diese Funktion berücksichtigt verschiedene Eigenschaften, um Variationen zwischen Browsern zu berücksichtigen und eine genauere Messung des gerenderten Inhalts zu gewährleisten, einschließlich Bereiche außerhalb des sichtbaren Viewports.

Indem Sie die Unterschiede verstehen und diese JavaScript-Methoden verwenden, können Sie Webanwendungen erstellen, die sich nahtlos an verschiedene Bildschirmgrößen und Fensterkonfigurationen anpassen.