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.
<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.
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
Gerenderte Pixel für Retina-Bilder
Physikalische Pixel für 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.