Guten Tag, Freunde!
Ich präsentiere Ihrer Aufmerksamkeit die Übersetzung eines kleinen Artikels "So erhalten Sie die Bildschirm-, Fenster- und Webseitengrößen in JavaScript" von Dmitri Pavlutin.
Um die Ausrichtung des Browserfensters (Quer- oder Hochformat) zu bestimmen, können Sie dessen Breite und Höhe vergleichen.
Es ist jedoch leicht, bei allen verfügbaren Größen verwirrt zu werden: Es gibt Bildschirmgrößen, Fenstergrößen, Webseiten usw.
Was bedeuten diese Größen und vor allem, wie man sie bekommt? Darüber werde ich Ihnen erzählen.
1. Bildschirm
1.1. Bildschirmgröße
Die Bildschirmgröße ist die Breite und Höhe des gesamten Bildschirms: Monitor oder mobiles Display.
Informationen zur Bildschirmgröße erhalten Sie über die
screenObjekteigenschaft window:
const screenWidth = window.screen.width
const screenHeight = window.screen.height
1.2. Verfügbare Bildschirmgröße
Die verfügbare Bildschirmgröße ist die Breite und Höhe des aktiven Bildschirms ohne die Symbolleiste des Betriebssystems.
Um die verfügbare Bildschirmgröße zu erhalten, wenden wir uns erneut an
window.screen:
const availableScreenWidth = window.screen.availWidth
const availableScreenHeight = window.screen.availHeight
2. Fenster
2.1. Externe Fenstergröße (oder externe Fenstergröße)
Die Größe des externen Fensters entspricht der Breite und Höhe des aktuellen Browserfensters, einschließlich der Adressleiste, der Registerkartenleiste und anderer Browserfenster.
Informationen zur Größe des äußeren Fensters können Sie mithilfe von Eigenschaften
outerWidthund einem outerHeightObjekt abrufen window:
const windowOuterWidth = window.outerWidth
const windowOuterHeight = window.outerHeight
2.2. Größe des Innenfensters (oder Größe des Innenfensters)
Die interne Größe des Fensters entspricht der Breite und Höhe des Ansichtsfensters (Ansichtsfensters).
Das Objekt
windowbietet Eigenschaften innerWidthund innerHeight:
const windowInnerWidth = window.innerWidth
const windowInnerHeight = window.innerHeight
Wenn Sie die interne Größe des Fensters ohne Bildlaufleisten erhalten möchten, gehen Sie wie folgt vor:
const windowInnerWidth = document.documentElement.clientWidth
const windowInnerHeight = document.documentElement.clientHeight
3. Webseitengröße
Die Webseitengröße ist die Breite und Höhe des angezeigten Inhalts (gerenderter Inhalt).
Verwenden Sie Folgendes, um die Größe der Webseite zu ermitteln (einschließlich Einrückung der Seite, jedoch ohne Rahmen, Einrückung und Bildlaufleisten):
const pageWidth = document.documentElement.scrollWidth
const pageHeight = document.documentElement.scrollHeight
Wenn
pageHeightgrößer als die innere Höhe des Fensters, ist eine vertikale Bildlaufleiste vorhanden.
4. Fazit
Hoffentlich verstehen Sie jetzt, wie Sie verschiedene Größen erhalten.
Die Bildschirmgröße ist die Größe des Monitors (oder der Anzeige), und die verfügbare Bildschirmgröße ist die Bildschirmgröße ohne die Betriebssystemsymbolleisten.
Die Größe des äußeren Fensters entspricht der Größe des aktiven Browserfensters (einschließlich Suchleiste, Registerkartenleiste, geöffneter Seitenleisten usw.), und die Größe des inneren Fensters entspricht der Größe des Ansichtsfensters.
Schließlich entspricht die Größe der Webseite der Größe des Inhalts.
Vielen Dank für Ihre Aufmerksamkeit, Freunde!