window.screen, window.orientation

Javascript Window: Breite, Höhe, Auflösung und Orientierung

Javascript window.screen stellt Informationen über die Auflösung, Höhe, Breite und Farbtiefe des Monitors zur Verfügung. window.orientation gibt die Drehung des Geräts in Grad an. Die wichtigsten Daten über den Monitor sind die Breite und Höhe des nutzbaren Bereichs sowie die Auflösung des Monitors in Pixeln.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Viewport der mobilen Geräte

Wenn Webseiten auf dem Monitor des Desktop-Rechners angezeigt werden, interessiert die Größe des Browserfensters mehr als die Auflösung des Monitors.

Für die Auflösung des Monitors interessieren sich vor allem Webseiten, die speziell für Smartphones und Tablets aufbereitet werden. Tablets mit Retina-Auflösung wie das iPad und die hoch auflösenden iPhones zeigen den Browser zwar über den gesamten Monitor, aber sie zoomen die Webseite aus, damit sie komplett auf den Monitor passt.

Größe Monitor / Viewport vs Größe der Webseite
Das Metatag für den Viewport der mobilen Geräte und ein responsives Webdesgin passen heute den Inhalt für kleinen Monitore an.
<meta name=viewport content="width=device-width, initial-scale=1">

documentElement.clientWidth

Breite des Viewports
document.documentElement.clientWidth ist die innere Breite eines Dokuments in CSS-Pixeln einschließlich padding, aber ohne border, margin und ohne Scrollleisten.
window.innerWidth
ist die Breite des Browserfensters in CSS-Pixeln und zwar inklusive der vertikalen Scrollleiste (falls die Scrollleiste angezeigt wird).
window.outerWidth
ist die äußere Breite des Browserfensters mitsamt allem "Chrome" des Browserfensters.
document.documentElement.clientWidth
window.innerHeight
window.outerHeight

screen und orientation

Die Abfragen geben den reinen Zahlenwert ohne Maßeinheit wie px zurück.

window.screen.availHeight

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

window.screen.availWidth

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

window.screen.height

Höhe der Monitorauflösung

window.screen.width

Breite der Monitorauflösung

window.screen.colorDepth

Farbtiefe des Monitors

window.screen.pixelDepth

Bit-Tiefe des Monitors. Hat nur dann einen Wert, wenn er von colorDepth abweicht, weil der Monitor intern eine eigene Farbtabelle nutzt und ist wohl nur auf sehr alten Rechnern von Bedeutung. Auf modernen Clients zeigen colorDepth und pixelDepth dieselben Werte – meist 24 Bit oder z.B. 32 Bit auf dem iPhone.

window.orientation

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

Die meisten Eigenschaften des Monitors fangen wir heute über @media-Regeln im CSS ab und CSS calc erspart Berechnungen in Javascript.

Monitor-Informationen auslesen

function screenInfo() {
   if (document.getElementById('showInfo')) {
      const showInfo = document.getElementById('showInfo');
      let screenText = document.createTextNode(
         "window.screen.availHeight " + window.screen.availHeight + "\n" + 
         "window.screen.availWidth  " + window.screen.availWidth + "\n" + 
         "window.screen.colorDepth  " + window.screen.colorDepth + "\n" + 
         "window.screen.height      " + window.screen.height + "\n" + 
         "window.screen.pixelDepth  " + window.screen.pixelDepth + "\n" + 
         "window.screen.width       " + window.screen.width);
      showInfo.appendChild(screenText);
   }
}

window.screen.availWidth und window.screen.width

Elemente auf dem Monitor wie die Taskbar oder die Menüleiste bei Mac OS können den ViewPort einschränken, dann weichen window.screen.availWidth und window.screen.width voneinander ab.

window.orientation

Bei mobilen Geräten, die gedreht werden können, gibt window.orientation die Drehung in Grad zurück.

Das orientationchange Event löst aus, wenn der Benutzer das mobile Gerät dreht und sich die Orientierung ändert.

orientation hat nur einen Wert. Diese Informationen werden z.B. gebraucht, um ein responsives Webdesign an die Orientierung des Monitors anzupassen. Bei Desktop-Monitoren gibt window.orientation undefined zurück.

Schaubild Orientierung mobile Geräte
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. orientation: portrait bzw. orientation: landscape reichen schon.

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

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

Monitor-Auflösungen mobiler Geräte

PHYSIK SOFTWARE
iPad 3 2048 × 1536 1024 × 748
iPad Pro 2224 × 1668 1112 × 834
Microsoft Surface Book 2 3000 × 2000 3000 × 2000
iPhone 12 2532 × 1170 390 × 844
Samsung A50 2340 × 1080 828 × 452

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

Auflösung CSS

Gerenderte Pixel für Retina-Bilder

Retina-Auflösung Bilder

Physikalische Pixel für Video

Auflösung Video

Monitor-Auflösung für Popup-Fenster

Interessant ist die Auflösung des Monitors noch, wenn Fenster geöffnet werden und das Fenster an die Auflösung des Monitors angepasst werden soll. Aber das Öffnen neuer Fenster gehört zu den Manipulationen der Benutzeroberfläche, der immer mehr Riegel vorgeschoben werden.