So erhalten Sie die Bildschirmgröße in Pixel

Es kann vorkommen, dass Ihre JavaScript-Anwendung wissen muss, welche Größe der Bildschirm benötigt, um bestimmte Aktionen ausführen zu können.

Glücklicherweise gibt es integrierte JavaScript-Funktionen, mit denen verschiedene Abmessungen des Bildschirms auf dem Gerät des Benutzers problemlos in Pixel erfasst werden können. Welche Sie verwenden, hängt davon ab, was Sie tun möchten.

Benutzerauflösung abrufen

Möglicherweise möchten Sie etwas tun, das die Geräteauflösung des Benutzers betrifft. In diesem Fall sollten Sie die integrierten Eigenschaften screen.widthund screen.heightEigenschaften verwenden. Diese geben Ihnen die Größe des Bildschirms, mit dem Sie es zu tun haben.

Dies ist nicht der Bereich, mit dem Sie auf der Seite arbeiten müssen .T iese Werte repräsentieren die Gesamtheit des Bildschirms , das ist die Bildschirmauflösung des Benutzers.

Browsergröße abrufen

Möglicherweise gibt es eine interessante Anwendung für den Umgang mit der aktuellen Größe des Browsers. Wenn Sie diese Dimensionen zugreifen müssen, verwenden Sie die screen.availWidthund screen.availHeightEigenschaften so zu tun.

Denken Sie daran, dass dies die Abmessungen des gesamten Browserfensters sind, vom oberen Rand des Browserfensters bis hinunter zu der Stelle, an der der Browser je nach Einrichtung auf eine Taskleiste oder den Rand Ihres Desktops trifft.

Ein interessanter Hinweis :screen.availHeightKann auch verwendet werden, um herauszufinden, wie hoch eine Taskleiste auf einem Computer ist. Falls Ihr Browser Auflösung sagen ist1366 x 768, undscreen.availHeightberichtet 728 Pixel, dannTaskleiste ist 40 Pixel hoch. Sie können die Höhe der Taskleiste auch berechnen, indem Sie Folgendes subtrahierenscreen.heightundscreen.availHeight:

var taskbarHeight = parseInt(screen.height,10) - parseInt(screen.availHeight,10) + " pixels"; /* For a user that has a screen resolution of 1366 x 768 pixels, their taskbar is likely 40 pixels if using Windows 10 with no added accessibility features. */

Größe des Anzeigefensters abrufen

Diese Eigenschaften sind interessant und können verwendet werden, um einige raffinierte Effekte zu erzielen. Sie können verwendet werden window.innerHeightund window.innerWidthdie Größe des Fensters für die Webseite zu bekommen , wie der Benutzer es sieht.

Beachten Sie, dass diese Werte nicht statisch sind und sich je nach dem, was mit dem Browser selbst geschieht, ändern. Mit anderen Worten, wenn der Browser selbst klein ist, sind diese Werte kleiner, und wenn der Browser maximiert ist, sind sie größer.

Wenn Sie beispielsweise in Google Chrome arbeiten und die Konsole öffnen (muss an einer Seite des Fensters angedockt sein), window.innerHeightändert sich dies entsprechend der Höhe der Konsole, da ein Teil des Fensters blockiert wird.

Sie können dies testen, indem Sie aufrufen window.innerHeight, den Wert notieren, die Konsole vergrößern und dann window.innerHeighterneut aufrufen .

Diese Eigenschaften ändern sich auch, wenn Ihr Browser in irgendeiner Weise maximiert oder in der Größe geändert wird. Bei der maximalen Größe eines Browsers ist die Eigenschaft window.innerWidthdieselbe wie beide screen.widthund screen.availWidth(es sei denn, auf der Seite befindet sich eine Taskleiste, die in diesem Fall screen.availWidthnicht gleich ist). window.innerHeightist gleich der Fläche im Fenster der Seite selbst (der Fläche der Webseite).

Höhe und Breite der Webseite abrufen

Wenn Sie sehen möchten, wie hoch oder breit Ihre Webseite tatsächlich ist, gibt es Eigenschaften, mit denen Sie diese Abmessungen erfassen können: document.body.offsetWidthund document.body.offsetHeight.

Diese Eigenschaften repräsentieren die Größe des Inhalts im Hauptteil der Seite. Eine Seite ohne Inhalt hat einen document.body.offsetHeightWert, der nahezu dem Wert entspricht, der davon window.innerHeightabhängt, welche Ränder / Auffüllungen am Hauptteil des Dokuments festgelegt sind. Wenn Ränder und Auffüllungen 0für das HTML-Stammelement und den Hauptteil des Dokuments festgelegt sind, sind document.body.offsetHeightund window.innerHeightohne Inhalt gleich.

Diese Eigenschaften können verwendet werden, um mit Ihrer Seite / Anwendung zu interagieren, je nachdem, was Sie tun möchten.