CSS, HTML und Javascript mit {stil}

window.screen, window.orientation

Javascript Window Adresse der Webseite, Größe des Browserfensters.

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.

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.

Nicht anders als ein iPad verhält sich das Nexus 7, dass die Seite in den Browser zoomt. Ohne spezielle Aufbereitung der Webseite für mobile Geräte zeigen Tablets die Webseite ohne Rand rechts und links – nur den

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

Farbtiefe des Monitors

window.screen.height

Höhe der Monitorauflösung

window.screen.width

Breite der Monitorauflösung

window.screen.pixelDepth

Bittiefe des Monitors. Hat aber nur dann einen Wert, der von colorDepth abweicht, denn der Monitor intern eine eigene Farbtabelle nutzt und ist heute wahrscheinlich nur noch 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.

Monitor-Informationen auslesen

function screenInfo()
{
   if (document.getElementById('showInfo')) {
      var showInfo = document.getElementById('showInfo');
      var 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.orientation

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

Monitor-Auflösungen mobiler Geräte

landscape
AvailHeight
availWidth
portrait
AvailHeight
availWidth
iPad31024
748
1024
748
Nexus7736
1280
1205
800
iPhone320
460
460
320

Die von Javascript-Screen angezeigt Breite und Höhe des Monitors muss nicht der Anzahl der Pixel entsprechen – darum zeigt das iPad 3 trotz einer physikalischen Auflösung von 2048 x 1536 Pixeln bei 264 ppi nur 1024 x 748.

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.