CSS, HTML UND JAVASCRIPT MIT {STIL}

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: Eigenschaften des Monitors

Eigenschaft	Beschreibung	Aktuell
availHeight	Höhe des beschreibbaren Bereichs des Monitors. Meist kleiner als die Monitorauflösung, da für die Taskleiste ein kleiner Bereich reserviert ist.
availWidth	Breite des beschreibbaren Bereichs des Monitors. Meist kleiner als die Monitorauflösung, da für die Taskleiste ein kleiner Bereich reserviert ist.
colorDepth	Farbtiefe der Anwendung
height	Höhe der Monitorauflösung
pixelDepth	Farbtiefe 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.
width	Breite der Monitorauflösung

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);
   }
}

Monitor-Auflösungen mobiler Geräte

	landscape AvailHeight availWidth	portrait AvailHeight availWidth
iPad3	1024 748	1024 748
Nexus7	736 1280	1205 800

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.