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.
Viewport-Größen Tabelle
| Modell | Viewport-Größe | Bildschirmauflösung | DPR | Erscheinungsjahr |
|---|---|---|---|---|
| Samsung Galaxy S24 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2024 |
| Samsung Galaxy S24+ | 384 × 854 | 1344 × 2992 | 3.5 | 2024 |
| Samsung Galaxy S24 | 360 × 780 | 1080 × 2340 | 3.0 | 2024 |
| Google Pixel 8 Pro | 412 × 892 | 1344 × 2992 | 3.25 | 2023 |
| Google Pixel 8 | 412 × 915 | 1080 × 2400 | 2.6 | 2023 |
| Samsung Galaxy S23 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2023 |
| Samsung Galaxy S23+ | 384 × 854 | 1080 × 2340 | 2.8 | 2023 |
| Samsung Galaxy S23 | 360 × 780 | 1080 × 2340 | 3.0 | 2023 |
| Samsung Galaxy Z Fold 5 | 384 × 832 | 1812 × 2176 | 3.0 | 2023 |
| Samsung Galaxy Z Flip 5 | 412 × 915 | 1080 × 2640 | 2.6 | 2023 |
| Google Pixel 7 Pro | 412 × 892 | 1440 × 3120 | 3.5 | 2022 |
| Google Pixel 7 | 412 × 915 | 1080 × 2400 | 2.6 | 2022 |
| Samsung Galaxy S22 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2022 |
| Samsung Galaxy S22+ | 384 × 854 | 1080 × 2340 | 2.8 | 2022 |
| Samsung Galaxy S22 | 360 × 780 | 1080 × 2340 | 3.0 | 2022 |
| OnePlus 10 Pro | 412 × 919 | 1440 × 3216 | 3.5 | 2022 |
| Google Pixel 6 Pro | 412 × 892 | 1440 × 3120 | 3.5 | 2021 |
| Google Pixel 6 | 412 × 915 | 1080 × 2400 | 2.6 | 2021 |
| Samsung Galaxy S21 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2021 |
| Samsung Galaxy S21+ | 384 × 854 | 1080 × 2400 | 2.8 | 2021 |
| Samsung Galaxy S21 | 360 × 800 | 1080 × 2400 | 3.0 | 2021 |
| OnePlus 9 Pro | 412 × 919 | 1440 × 3216 | 3.5 | 2021 |
| OnePlus 9 | 412 × 915 | 1080 × 2400 | 2.6 | 2021 |
| Xiaomi Mi 11 | 360 × 800 | 1440 × 3200 | 4.0 | 2021 |
| Samsung Galaxy S20 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2020 |
| Samsung Galaxy S20+ | 384 × 854 | 1440 × 3200 | 3.75 | 2020 |
| Samsung Galaxy S20 | 360 × 800 | 1440 × 3200 | 4.0 | 2020 |
| Google Pixel 5 | 393 × 851 | 1080 × 2340 | 2.75 | 2020 |
| Google Pixel 4 XL | 412 × 869 | 1440 × 3040 | 3.5 | 2019 |
| Google Pixel 4 | 393 × 830 | 1080 × 2280 | 2.75 | 2019 |
| OnePlus 8 Pro | 412 × 919 | 1440 × 3168 | 3.5 | 2020 |
| Samsung Galaxy Note 20 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 2020 |
| Samsung Galaxy S10+ | 412 × 869 | 1440 × 3040 | 3.5 | 2019 |
| Samsung Galaxy S10 | 360 × 760 | 1440 × 3040 | 4.0 | 2019 |
| Samsung Galaxy S10e | 360 × 760 | 1080 × 2280 | 3.0 | 2019 |
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
Verwandte Ressourcen
Wird geladen...