Wie Sie die Bildschirmbreite mit JavaScript bestimmen können, ist eine nützliche Möglichkeit für responsives Webdesign

JavaScript ist eine der beliebtesten Programmiersprachen, die häufig zum Erstellen dynamischer und interaktiver Websites verwendet wird. Ein wichtiger Aspekt der Webentwicklung ist die Anpassungsfähigkeit und Reaktionsfähigkeit der Website auf verschiedene Geräte und Bildschirmgrößen. In diesem Artikel werden wir untersuchen, wie die Bildschirmbreite mit JavaScript überprüft werden kann und welche Methoden für diesen Zweck verwendet werden können.

Es gibt mehrere Möglichkeiten, die Bildschirmbreite mit JavaScript zu erhalten. Eine der gebräuchlichsten Methoden ist die Verwendung einer Eigenschaft screen.width. Diese Eigenschaft gibt die Breite des Bildschirms des Benutzers in Pixeln an und kann verwendet werden, um Entscheidungen über das Layout oder die Szenarien der Website zu treffen, abhängig von der Bildschirmgröße des Benutzers.

Eine andere Möglichkeit besteht darin, die Eigenschaft zu verwenden window.innerWidth. Diese Eigenschaft gibt die Breite des Browserfensters des Benutzers in Pixeln zurück, einschließlich der Bildlaufleiste (falls vorhanden). Es kann nützlich sein, wenn Sie bestimmen möchten, welche Elemente und Websitelayouts je nach Größe des Browserfensters angezeigt werden sollen.

Es gibt auch verschiedene andere Methoden zum Überprüfen der Bildschirmbreite, einschließlich der Verwendung eines Ereignisses resize, die beim Ändern der Größe des Browserfensters ausgelöst wird und es Ihnen ermöglicht, die Website an die neuen Bildschirmgrößen anzupassen. Sie können auch Bibliotheken und Frameworks wie Bootstrap, Foundation und andere verwenden, die vorgefertigte Lösungen für die adaptive Webentwicklung bereitstellen und Methoden zur Überprüfung der Bildschirmbreite enthalten.

Methoden zur Überprüfung der Bildschirmbreite in JavaScript

Es gibt mehrere Methoden, mit denen Sie die Bildschirmbreite in JavaScript überprüfen können. Diese Methoden ermöglichen es Entwicklern, ihre Webanwendungen und Websites an unterschiedliche Bildschirmgrößen anzupassen, wodurch sie für die Benutzer benutzerfreundlicher und zugänglicher werden.

• window.innerWidth: Diese Methode gibt die Breite des Browserfensters einschließlich der Bildlaufleiste zurück (falls vorhanden). Diese Methode wird am häufigsten verwendet, um die Bildschirmbreite in JavaScript zu überprüfen.
• window.outerWidth: Diese Methode gibt die Breite des Browserfensters einschließlich des Browserrahmens und anderer Elemente der Benutzeroberfläche zurück. Es unterscheidet sich von window.innerWidth ist, dass window.outerWidth enthält Browser-Interface-Elemente und window.innerWidth - nein.
• document.documentElement.clientWidth: Diese Methode gibt die Breite des sichtbaren Bereichs (ohne Bildlaufleiste) eines Elements zurück html Dokumentes. Die Interaktion mit den Spezifikationen unterscheidet sich in verschiedenen Browsern, gibt jedoch grundsätzlich die Breite des Clients zurück, die der Benutzer sieht.
• document.body.clientWidth: Diese Methode gibt die Breite des Dokumentclients (ohne Bildlaufleiste) am Anfang des Elements zurück body. Dies kann nützlich sein, wenn Sie die Clientbreite eines Elements erhalten möchten body ohne Rücksicht auf den Rest des Dokuments.

Es ist wichtig zu beachten, dass Sie bei der Verwendung dieser Methoden berücksichtigen müssen, dass sie einen Wert in Pixeln zurückgeben. Es wird daher empfohlen, ausdrucksstarke und benutzerfreundliche Maßeinheiten wie Prozentsätze oder relative CSS-Einheiten zu verwenden, um das Erscheinungsbild einer Webseite entsprechend der Bildschirmbreite anzupassen.

Die window-Methode.innerWidth

Um die window-Methode zu verwenden.innerWidth genügt es, es ohne Argumente aufzurufen:

const windowWidth = window.innerWidth;

Variablenwert windowWidth stellt den numerischen Wert der Bildschirmbreite in Pixeln dar.

Die window-Methode.innerWidth ist nützlich, wenn Sie nur die Breite des sichtbaren Bereichs des Browserfensters erhalten möchten, ohne die Bildlaufleiste zu berücksichtigen. Wenn Sie die Bildlaufleiste umgehen und die volle Breite des Dokuments ermitteln möchten, verwenden Sie eine andere Methode, document.documentElement.clientWidth.

Ein Beispiel für die Verwendung der window-Methode.innerWidth:

// Проверяем ширину экранаconst windowWidth = window.innerWidth;console.log("Ширина экрана: " + windowWidth + "px");

Die document-Methode.documentElement.clientWidth

Die document-Methode.documentElement.clientWidth gibt die Breite des sichtbaren Inhalts eines HTML-Elements in Pixeln zurück, einschließlich der Grenzen, jedoch ohne Bildlaufleisten.

Diese Methode ist nützlich für das adaptive Layout und die Reaktion auf die Größenänderung des Browserfensters durch den Benutzer. Sie können beispielsweise Stile ändern, Elemente hinzufügen oder entfernen oder Inhalte basierend auf der Bildschirmbreite aktualisieren.

Beachten Sie, dass die document-Methode.documentElement.clientWidth gibt die aktuelle Breite des sichtbaren Bereichs zurück und berücksichtigt die Größe der Bildlaufleiste nicht. Wenn Sie die Bildlaufleiste berücksichtigen, können Sie window verwenden.innerWidth oder document.body.clientWidth .

matchMedia-Methode

Beispiel für die Verwendung der matchMedia-Methode :

// Проверка ширины экрана при загрузке страницыconst mediaQuery = window.matchMedia("(max-width: 768px)");if (mediaQuery.matches) else // Проверка ширины экрана при изменении размера окнаwindow.addEventListener("resize", function() );

In diesem Beispiel wird die Medienabfrage "(max-width: 768px)" beim Laden der Seite und beim Ändern der Fenstergröße ausgelöst. Wenn die Bildschirmbreite kleiner oder gleich 768 Pixel ist, wird die Hintergrundfarbe der Seite rot, andernfalls grün.