window.screen, window.orientation

Größe des Monitors und des Browserfensters

Für Popups, Overlays und modale Fenster ist die Größe des Browserfensters ausschlaggebend, für die Fullscreen-Wiedergabe bzw. den Vollbildmodus werden Höhe und Breite des Monitors – window.screen – gebraucht.

window.screen mit den Eigenschaften availableWidth und availableHeight ist der Monitor bzw. das Bildschirmgerät, auf dem der Browser läuft.

requestFullscreen: Fullscreen / Vollbildmodus

Das Fullscreen API erlaubt, jedes HTML-Element im Vollbild anzuzeigen: Bilder, iframes, PDF, Videos bis hin zu Webseiten. Mit der Abfrage nach der Auflösung des Monitors können Medien in einer angemessenen Auflösung geladen und mit requestFullscreen() im Vollbildmodus angezeigt werden.

<div class="fullscreen foto">
	<img src="thumbnail.webp" width="420" height="280" alt="Bild Fullscreen zeigen">
</div>

document.querySelector(".fullscreen.foto").addEventListener ("click", function () {
	if (document.fullscreenEnabled) {
    	const img = document.createElement("img");
		
		img.addEventListener ("load", function () {
			document.querySelector(".fullscreen img").src = img.src;
			document.querySelector(".fullscreen img").requestFullscreen();
		});
		
		const availWidth = window.screen.availWidth;
		switch (true) {
			case (availWidth > 1440):
				img.src = "img-2460.webp";
				break;
			case (availWidth > 720): 
				…
			default: 
				img.src = "img-420.webp";
		}
	} else {
		document.querySelector(".msg").innerHTML = "Dieses Geräte unterstützt keinen Fullscreen-Modus";
	}
});

if (document.fullscreenEnabled) fragt ab, ob das Gerät Fullscreen unterstützt. Aktuell zeigt Safari auf dem iPhone nur Video im Fullscreen-Modus an, Bilder und andere Elemente hingegen nicht. Android-Geräte und auch das iPad unterstützen den Vollbild-Modus, obwohl Safari auf dem iPad keinen nativen Vollbildmodus wie auf Desktop-Browsern bietet.

Eigenschaften des Monitors / Bildschirms

Elemente des Monitors wie die Taskbar oder die Menüleiste können den ViewPort einschränken, dann weichen window.screen.availWidth und window.innerWidth voneinander ab.

window.screen beschreibt den Monitor mit Breite und Höhe, Farbtiefe und Auflösung. Die Abfragen geben den reinen Zahlenwert ohne Maßeinheit wie px zurück.

window.screen.availWidth

Breite des beschreibbaren Bereichs des Monitors. Meist kleiner als die Monitorauflösung, da für die Taskleiste oder Dock ein kleiner Bereich reserviert ist.

window.screen.availHeight

Höhe des beschreibbaren Bereichs des Monitors. Meist kleiner als die Monitorauflösung, da für die Taskleiste oder Dock ein kleiner Bereich reserviert ist.

window.screen.width

Breite der Monitorauflösung

window.screen.height

Höhe der Monitorauflösung

window.screen.colorDepth

Farbtiefe des Monitors

window.screen.pixelDepth

Bit-Tiefe des Monitors. Hat nur dann einen anderen Wert als window.colorDepth, wenn der Monitor intern eine eigene Farbtabelle nutzt. Auf modernen Clients zeigen colorDepth und pixelDepth dieselben Werte – meist 24 Bit oder z.B. 32 Bit auf dem iPhone.

Breite und Höhe des Browserfensters

innerWidth/innerHeight und outerWidth/outerHeight geben Breite und Höhe des Browserfenster als ganzzahlige Werte zurück.

window.innerWidth

Breite des Browserfensters in Pixeln – einschließlich des sichtbaren Inhalts und der vertikalen Scrollleisten, falls vorhanden.

window.innerHeight

Höhe des Browserfensters in Pixeln – einschließlich des sichtbaren Inhalts und der horizontalen Scrollleisten, falls vorhanden.

window.outerWidth

Breite des Browserfensters in Pixeln – einschließlich des sichtbaren Inhalts und der vertikalen Scrollleisten, falls vorhanden.

window.outerHeight

Höhe des Browserfensters in Pixeln – einschließlich des sichtbaren Inhalts und der horizontalen Scrollleisten, falls vorhanden.

Alternativ: document.documentElement.clientWidth/clientHeight geben ebenfalls die Breite des sichtbaren Bereichs im Browserfenster ohne Scrollleisten zurück. Einige Browser legen die Scrollleisten über den Inhalt der Seite, so dass die Werte dieselben wie bei window.innerWidth und window.innerHeight sind.

window.orientation

Bei mobilen Geräten, die gedreht werden können, gibt window.orientation die Drehung in Grad zurück. window.orientation gibt 0 bzw. 180 zurück, wenn das Gerät im Landscape-Modus ist, -90 bzw. 90 im Porträt-Format. Bei Webseiten interessiert es weniger, ob die Seite auf dem Kopf steht.

if (window.matchMedia("(orientation: portrait)").matches) {
	…
}

if (window.matchMedia("(orientation: landscape)").matches) {
   …
}

Die ältere Eigenschaft window.orientation hat nur einen Wert und ist nur auf mobilen Geräten verfügbar.

window.orientation

Orientierung hat nur einen Wert bei mobilen Geräten. Beim Desktop-Monitor gibt Orientation undefined zurück.

Das orientationchange-Event löst aus, wenn der Benutzer das mobile Gerät dreht und sich die Orientierung ändert. orientationchange gilt heute als deprecated (veraltet). Um herauszufinden, ob ein Gerät vom Hochformat ins Querformat oder umgekehrt gedreht wurde, kann das resize-Event benutzt werden, um die Änderung abzufangen. Der Vergleich von window.innerWidth und window.innerHeight liefert, ob das Gerät vom Porträt-Modus oder Landscape-Modus gedreht wurde.

window.addEventListener("resize", function() {
	if (window.innerWidth > window.innerHeight) {
		console.log("Querformat (Landscape)");
	} else {
		console.log("Hochformat (Portrait)");
	}
});

screen.orientation-API

Das modernere screen.orientation-API gibt auch die Orientierung von Desktop-Monitore zurück.

document.querySelector("#orientation").innerHTML = screen.orientation.type;
// Event-Listener feuert bei Änderung der Ausrichtung / Orientierung.

screen.orientation.addEventListener("change", function() {
    document.querySelector("#orientation").innerHTML = screen.orientation.type;
});

Beispiele für Monitor-Auflösungen mobiler Geräte

Die von Javascript-Screen angezeigte Breite und Höhe des ViewPorts / Monitors muss nicht der Anzahl der Pixel entsprechen – darum zeigt das iPad PRO trotz einer physikalischen Auflösung von 2224x1668 Pixeln bei 264 ppi eine Software-Auflösung von 1112x834 Pixeln.

Screengröße für CSS

Gerenderte Pixel für Retina-Bilder

Physikalische Pixel für Video