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.

18-12-15 SITEMAP

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.

Dokument im Browserfenster bei Desktop und Mobile
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">

screen und orientation

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

Bittiefe 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.

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 6/8 2436 × 1125 460 × 320
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

414 x 736 Pixel

Gerenderte Pixel für Retina-Bilder

1242 x 2208 Pixel

Physikalische Pixel für Video

1080 x 1920 Pixel

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.

414 x 736 Pixel 1242 x 2208 Pixel 1080 x 1920 Pixel 90° 180° -90°