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.

Viewport-Größen Tabelle

Modell	Viewport-Größe	Bildschirmauflösung	DPR	Erscheinungsjahr
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	390 × 844	1170 × 2532	3	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