iPad Viewport-Größen: Vollständiger Leitfaden
Dieser umfassende Leitfaden bietet detaillierte Viewport-Größen und Bildschirmauflösungen für alle iPad-Modelle. 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 |
|---|---|---|---|---|
| iPad Air 13" (M3) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2025 |
| iPad Air 11" (M3) | 820 × 1180 | 1640 × 2360 | 2.0 | 2025 |
| iPad (A16) | 820 × 1180 | 1640 × 2360 | 2.0 | 2025 |
| iPad mini (A17 Pro) | 744 × 1133 | 1488 × 2266 | 2.0 | 2024 |
| iPad Pro 13" (M4) | 1032 × 1376 | 2064 × 2752 | 2.0 | 2024 |
| iPad Pro 11" (M4) | 834 × 1210 | 1668 × 2420 | 2.0 | 2024 |
| iPad Air 13" (M2) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2024 |
| iPad Air 11" (M2) | 820 × 1180 | 1640 × 2360 | 2.0 | 2024 |
| iPad Pro 12.9" (2022) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2022 |
| iPad Pro 11" (2022) | 834 × 1194 | 1668 × 2388 | 2.0 | 2022 |
| iPad 10th Gen | 820 × 1180 | 1640 × 2360 | 2.0 | 2022 |
| iPad mini (2021) | 744 × 1133 | 1488 × 2266 | 2.0 | 2021 |
| iPad 9th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2021 |
| iPad Pro 12.9" (2021) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2021 |
| iPad Pro 11" (2021) | 834 × 1194 | 1668 × 2388 | 2.0 | 2021 |
| iPad Air (2020) | 820 × 1180 | 1640 × 2360 | 2.0 | 2020 |
| iPad 8th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2020 |
| iPad Pro 12.9" (2020) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2020 |
| iPad Pro 11" (2020) | 834 × 1194 | 1668 × 2388 | 2.0 | 2020 |
| iPad 7th Gen | 810 × 1080 | 1620 × 2160 | 2.0 | 2019 |
| iPad Air (2019) | 834 × 1112 | 1668 × 2224 | 2.0 | 2019 |
| iPad mini (2019) | 768 × 1024 | 1536 × 2048 | 2.0 | 2019 |
| iPad Pro 12.9" (2018) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2018 |
| iPad Pro 11" (2018) | 834 × 1194 | 1668 × 2388 | 2.0 | 2018 |
| iPad 6th Gen | 768 × 1024 | 1536 × 2048 | 2.0 | 2018 |
| iPad Pro 10.5" | 834 × 1112 | 1668 × 2224 | 2.0 | 2017 |
| iPad Pro 12.9" (2017) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2017 |
| iPad 5th Gen | 768 × 1024 | 1536 × 2048 | 2.0 | 2017 |
| iPad Pro 9.7" | 768 × 1024 | 1536 × 2048 | 2.0 | 2016 |
| iPad Pro 12.9" (2015) | 1024 × 1366 | 2048 × 2732 | 2.0 | 2015 |
| iPad mini 4 | 768 × 1024 | 1536 × 2048 | 2.0 | 2015 |
| iPad Air 2 | 768 × 1024 | 1536 × 2048 | 2.0 | 2014 |
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: iPad unterstützt sowohl Hoch- als auch Querformat
Design-Überlegungen
- Entwerfen Sie für Hoch- und Querformat
- Berücksichtigen Sie die größere Bildschirmfläche des iPads
- Optimieren Sie für Touch-Interaktionen
- Verwenden Sie geeignete Media Queries für verschiedene iPad-Modelle
- 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.