iPhone Viewport-Größen: Vollständiger Leitfaden
Dieser umfassende Leitfaden bietet detaillierte Viewport-Größen und Bildschirmauflösungen für alle iPhone-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 |
|---|---|---|---|---|
| iPhone 17 Pro Max | 440 × 956 | 1320 × 2868 | 3 | 2025 |
| iPhone 17 Pro | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 17 Air | 420 × 912 | 1260 × 2736 | 3 | 2025 |
| iPhone 17 | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 16e | 390 × 844 | 1170 × 2532 | 3 | 2025 |
| iPhone 16 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2024 |
| iPhone 16 Pro | 393 × 852 | 1179 × 2556 | 3 | 2024 |
| iPhone 16 Plus | 428 × 926 | 1284 × 2778 | 3 | 2024 |
| iPhone 16 | 390 × 844 | 1170 × 2532 | 3 | 2024 |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2023 |
| iPhone 15 Pro | 393 × 852 | 1179 × 2556 | 3 | 2023 |
| iPhone 15 Plus | 428 × 926 | 1284 × 2778 | 3 | 2023 |
| iPhone 15 | 390 × 844 | 1170 × 2532 | 3 | 2023 |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2022 |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | 3 | 2022 |
| iPhone 14 Plus | 428 × 926 | 1284 × 2778 | 3 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3 | 2022 |
| iPhone SE (3rd generation) | 375 × 667 | 750 × 1334 | 2 | 2022 |
| iPhone 13 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2021 |
| iPhone 13 Pro | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 mini | 375 × 812 | 1080 × 2340 | 3 | 2021 |
| iPhone 12 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2020 |
| iPhone 12 Pro | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 mini | 375 × 812 | 1080 × 2340 | 3 | 2020 |
Viewport-Größen verstehen
Viewport-Grundlagen
Bei der Gestaltung für Geräte ist es wichtig, den Unterschied zwischen Viewport-Größen und Bildschirmauflösungen zu verstehen:
- 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
Design-Überlegungen
- Verwenden Sie responsive Design-Techniken
- Testen Sie auf mehreren iPhone-Modellen
- Berücksichtigen Sie Notch- und Home-Indikator-Bereiche
- Optimieren Sie für verschiedene Ausrichtungen
- Verwenden Sie geeignete Media Queries
Technische Umsetzung
- Implementieren Sie korrekte Viewport-Meta-Tags
- Verwenden Sie CSS Media Queries effektiv
- Berücksichtigen Sie Safe Area Insets
- Optimieren Sie für verschiedene DPR-Werte
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.