iPad Viewport-Größen: CSS-Pixel, DPR und Auflösung
Vergleiche CSS-Viewport, DPR, physische Auflösung und Modelljahr für iPad Pro, Air, mini und Basis-iPad. Nutze die Tabelle für Tablet-Breakpoints, responsive QA und Layouttests.
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.
Kurzantwort: Nutze diese iPad-Viewport-Tabelle, um Pro, Air, mini und Basis-iPad nach CSS-Größe, DPR, physischer Auflösung und Modelljahr für Tablet-Breakpoints einzuordnen.
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.