Bildschirmgrößen & Auflösungen von Geräten

Logische vs. physische Auflösung und DPR

Jeder moderne Bildschirm hat zwei Auflösungen. Die physische Auflösung ist die tatsächliche Anzahl der im Panel verbauten Pixel — beim iPhone 15 zum Beispiel 1179 × 2556. Die logische (CSS-)Auflösung ist der kleinere Koordinatenraum, in dem eine Webseite dargestellt wird, etwa 393 × 852. Das Device Pixel Ratio (DPR) bildet die Brücke zwischen beiden: Es ergibt sich aus der physischen Auflösung geteilt durch die logische, sodass ein DPR von 3 bedeutet, dass das Smartphone für jedes CSS-Pixel einen 3 × 3 großen Block echter Pixel zeichnet. Hochauflösende „Retina“-Smartphones und -Laptops verwenden ein DPR von 2 oder 3, um Text und Bilder gestochen scharf darzustellen, während ein typischer Desktop-Monitor ein DPR von 1 hat, bei dem ein CSS-Pixel einem physischen Pixel entspricht.

Warum Designer mit Viewport-Größen arbeiten

Beim Erstellen eines responsiven Layouts werden deine CSS-Media-Queries und Breakpoints in CSS-Pixeln gemessen — dem logischen Viewport — und nicht in den physischen Pixeln des Panels. Ein Smartphone, das physisch 1080 Pixel breit ist, meldet trotzdem nur einen Viewport von 360–414 CSS-Pixeln, weshalb ein mobiler Breakpoint bei 360 px die meisten Android-Smartphones abdeckt. Wenn du dich am Viewport statt an der reinen Auflösung orientierst, bleiben Text und Touch-Ziele über Geräte mit sehr unterschiedlichen Pixeldichten hinweg physisch gleich groß, sodass sich dasselbe Layout sowohl auf einem Laptop mit geringer Dichte als auch auf einem dichten Flaggschiff-Smartphone stimmig anfühlt.

So liest du diese Tabelle

• Viewport (CSS px) ist die logische Größe, die eine Webseite sieht, angegeben in der natürlichen Ausrichtung des Geräts — Hochformat bei Smartphones und Tablets, Querformat bei Laptops und Monitoren.
• Physische Auflösung ist die tatsächliche Pixelzahl des Panels — der Wert, der in Datenblättern beworben wird.
• DPR (Device Pixel Ratio) skaliert den Viewport auf die physische Auflösung hoch; jeder Wert über 1 steht für ein hochauflösendes Display.
• Seitenverhältnis beschreibt die Form des Bildschirms — vom schlanken 19.5:9 moderner Smartphones über das 16:9 der meisten Monitore bis zum 21:9 und 32:9 von Ultrawide-Displays.
• Zeilen für Laptops und 4K spiegeln die übliche Standard-Skalierungsstufe wider, weshalb der Viewport kleiner sein kann als die native Auflösung des Panels.

Größen ändern sich mit jedem Modell

Betrachte diese Werte als praktische Orientierung, nicht als Garantie. Hersteller ändern die Bildschirmabmessungen fast mit jeder Generation — allein beim iPhone reichten die Viewports zuletzt von 375 über 390, 393, 402, 414, 430 bis 440 CSS-Pixel Breite — und bei Android-Geräten ist die Streuung noch größer. Die Bildschirmskalierung des Betriebssystems verschiebt den gemeldeten Viewport zusätzlich: Ein 1080p-Windows-Laptop mit 150 % Skalierung verhält sich wie ein 1280 × 720 großer Bildschirm mit einem DPR von 1.5. Der verlässlichste Wert ist immer der, den dein eigener Browser meldet — deshalb wird das passende Gerät oben live anhand deines Bildschirms erkannt.