Android Viewport-Größen: Vollständiger Leitfaden
Dieser umfassende Leitfaden bietet detaillierte Viewport-Größen und Bildschirmauflösungen für beliebte Android-Geräte. Unverzichtbare Informationen für Webentwickler und Designer, die an responsiven Websites und Anwendungen arbeiten.
Datenstatus: Zuletzt aktualisiert: 2026-02-08 (UTC)
Quellen: Offizielle Spezifikationsseiten von Apple, Google und Samsung
Methode: iPhone- und iPad-Werte werden hauptsächlich als Auflösung durch DPR berechnet. Android-CSS-Viewport und DPR können durch Display-Skalierung, Browser-UI und Systemeinstellungen variieren.
Viewport-Größen Tabelle
| Modell | Viewport-Größe | Bildschirmauflösung | DPR | Erscheinungsjahr |
|---|---|---|---|---|
| Google Pixel 10 Pro XL | 414 × 921 | 1344 × 2992 | 3.25 | 2025 |
| Google Pixel 10 Pro | 410 × 914 | 1280 × 2856 | 3.125 | 2025 |
| Google Pixel 10 | 412 × 923 | 1080 × 2424 | 2.625 | 2025 |
| Google Pixel 10 Pro Fold (Cover / Main) | 412 × 923 / 692 × 717 | 1080 × 2424 / 2076 × 2152 | 2.625 / 3.0 | 2025 |
| Samsung Galaxy S25 Ultra | 412 × 891 | 1440 × 3120 | 3.5 | 2025 |
| Samsung Galaxy S25+ | 412 × 891 | 1440 × 3120 | 3.5 | 2025 |
| Samsung Galaxy S25 | 360 × 780 | 1080 × 2340 | 3.0 | 2025 |
| Samsung Galaxy Z Fold6 (Cover / Main) | 323 × 792 / 619 × 720 | 968 × 2376 / 1856 × 2160 | 3.0 | 2024 |
| Samsung Galaxy Z Flip6 | 393 × 960 | 1080 × 2640 | 2.75 | 2024 |
| Samsung Galaxy S24 Ultra | 412 × 891 | 1440 × 3120 | 3.5 | 2024 |
| Samsung Galaxy S24+ | 412 × 891 | 1440 × 3120 | 3.5 | 2024 |
| Samsung Galaxy S24 | 360 × 780 | 1080 × 2340 | 3.0 | 2024 |
| Google Pixel 9 Pro XL | 414 × 921 | 1344 × 2992 | 3.25 | 2024 |
| Google Pixel 9 Pro | 410 × 914 | 1280 × 2856 | 3.125 | 2024 |
| Google Pixel 9 | 412 × 923 | 1080 × 2424 | 2.625 | 2024 |
| Google Pixel 8 Pro | 412 × 921 | 1344 × 2992 | 3.25 | 2023 |
| Google Pixel 8 | 412 × 915 | 1080 × 2400 | 2.625 | 2023 |
| Samsung Galaxy S23 Ultra | 412 × 915 | 1440 × 3088 | 3.5 | 2023 |
| Samsung Galaxy S23+ | 384 × 854 | 1080 × 2340 | 2.8125 | 2023 |
| Samsung Galaxy S23 | 360 × 780 | 1080 × 2340 | 3.0 | 2023 |
| Google Pixel 7 Pro | 412 × 892 | 1440 × 3120 | 3.5 | 2022 |
| Google Pixel 7 | 412 × 915 | 1080 × 2400 | 2.625 | 2022 |
| Samsung Galaxy S22 Ultra | 412 × 915 | 1440 × 3088 | 3.5 | 2022 |
| Samsung Galaxy S22+ | 384 × 854 | 1080 × 2340 | 2.8125 | 2022 |
| Samsung Galaxy S22 | 360 × 780 | 1080 × 2340 | 3.0 | 2022 |
| Google Pixel 6 Pro | 412 × 915 | 1440 × 3120 | 3.5 | 2021 |
| Google Pixel 6 | 412 × 915 | 1080 × 2400 | 2.625 | 2021 |
| Samsung Galaxy S21 Ultra | 384 × 854 | 1440 × 3200 | 3.75 | 2021 |
| Samsung Galaxy S21+ | 384 × 854 | 1080 × 2400 | 2.8125 | 2021 |
| Samsung Galaxy S21 | 360 × 800 | 1080 × 2400 | 3.0 | 2021 |
Viewport-Größen verstehen
Viewport-Grundlagen
- Viewport-Größe: Der sichtbare Bereich in CSS-Pixeln, den Ihre Website nutzen kann
- Bildschirmauflösung: Die tatsächliche Anzahl physischer Pixel auf dem Gerät
- Device Pixel Ratio (DPR): Das Verhältnis zwischen physischen Pixeln und CSS-Pixeln
- Ausrichtung: Android-Geräte unterstützen sowohl Hoch- als auch Querformat
Design-Überlegungen
- Entwerfen Sie für verschiedene Bildschirmgrößen und Dichten
- Berücksichtigen Sie verschiedene Seitenverhältnisse
- Optimieren Sie für Touch-Interaktionen
- Verwenden Sie geeignete Media Queries
- Berücksichtigen Sie faltbare Geräte
Häufige Fragen zu Geräte-Viewports
Die Viewport-Größe ist der CSS-Pixelbereich für dein Layout, die Bildschirmauflösung ist die physische Pixelanzahl des Geräts. Beides ist über DPR verbunden, aber Browser-UI und Skalierung können den effektiven Viewport ändern.
Unterschiedliche DPR-Werte, Display-Skalierung und Browser-Verhalten können verschiedene CSS-Viewport-Breiten erzeugen, auch bei ähnlicher physischer Auflösung.
Nutze die Tabelle als Referenz für reale Geräte, definiere Breakpoints aber nach Inhaltsverhalten statt nach einzelnen Modellen. Teste wichtige Bereiche wie 360, 390, 412, 768, 820, 834 und 1024 CSS-Pixel.
Foldables wechseln zwischen Cover- und Hauptdisplay mit sehr unterschiedlichen Viewport-Verhältnissen. Teste beide Zustände und Rotationen und vermeide hart codierte Layouts für nur eine Breite.
Wir aktualisieren die Daten nach wichtigen Geräte-Releases und Spezifikationsänderungen. Prüfe kritische Produktionsfälle immer zusätzlich auf echten Geräten oder Cloud-Testlabs.