Apple verkauft ab dem 23. Oktober das iPhone Duo, das erste faltbare iPhone mit einem 7,6 Zoll großen Innendisplay. App-Teams bekommen mit dem SDK von iOS 27.1 klare Vorgaben für Größenklassen, Bildschirmränder und den Falz. Webdesigner gehen dagegen leer aus: Die CSS-Schnittstelle für faltbare Displays unterstützen bisher nur Chrome und Edge.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Auf dem iPhone Duo ändert sich die Fläche einer App oder Website ständig: Nutzer klappen das Gerät auf, drehen und falten das Telefon oder ziehen eine zweite App daneben. Céss White beschreibt im Blog der Lernplattform Code with Beto, welche gewohnten Annahmen über das iPhone-Display dabei nicht mehr gelten.[1]
Das Wichtigste in Kürze
- Apps mit älterem SDK behalten innen ihre gewohnte Größe, erst ein Build mit iOS 27.1 nutzt den ganzen Schirm.
- Apple verlangt Layouts nach Größenklassen statt nach Ausrichtung und warnt vor ungleichen Sicherheitsrändern.
- Die CSS-Schnittstelle für Viewport-Segmente läuft nur in Chrome und Edge, Safari meldet Websites keinen Falz.
- Das iPhone Duo kostet in Deutschland ab 2.299 € und kommt am 23. Oktober in den Handel.
Was müssen App-Teams für das iPhone Duo ändern?
Teams bauen ihre App zuerst mit Xcode 27.1 und dem SDK von iOS 27.1 neu. Danach richten die Entwickler das Layout an Größenklassen statt an der Ausrichtung aus und behandeln jeden Bildschirmrand einzeln.[3]
Ohne neuen Build behält eine App auf dem Innendisplay ihre gewohnte Größe, rundherum bleibt Fläche ungenutzt. Erst mit dem SDK von iOS 27.1 reicht die Oberfläche bis zur Kante, Navigations- und Werkzeugleisten stehen dann senkrecht. Aufgeklappt meldet das System in beiden Achsen die Größenklasse „regular“, genug für Seitenleisten und mehrere Spalten.[3]
Apple rät im Tech Talk davon ab, Layouts an der Ausrichtung des Geräts festzumachen. Auch die Sicherheitsränder fallen ungleich aus, weil senkrechte Leisten im Querformat und in Split View mal links, mal rechts erscheinen. Code, der einen Rand einfach verdoppelt, berechnet die nutzbare Breite falsch.[3]
Heikel bleibt der Falz im halb gefalteten Zustand. White empfiehlt, Bedienelemente von der Displaymitte fernzuhalten, Listen und Artikeltexte dürfen über diese Zone scrollen.[1]
Warum lässt sich der Falz in Safari nicht per CSS abfragen?
Safari unterstützt die Viewport Segments API nicht. Die CSS-Media-Features und JavaScript-Werte, die Lage und Größe der Displayhälften liefern, stehen seit Version 138 nur in Chrome und Edge bereit.[4]
Mit @media (horizontal-viewport-segments: 2) und Variablen wie env(viewport-segment-width 0 0) platzieren Entwickler Inhalte links und rechts vom Knick.[4] Safari auf dem iPhone Duo liefert dagegen nur Breite und Höhe des Fensters.
Beim WebKit-Projekt liegt die Anfrage nach einer offiziellen Position seit März 2024 offen. Am 20. September 2026 hakte Bramus Van Damme aus dem Chrome-Team von Google nach und merkte an, die Funktion stecke im Simulator von iOS 27.1 hinter einem Testschalter.[5]
Apple entschärft das Problem mit einer Designentscheidung: Außen- und Innendisplay haben das gleiche Seitenverhältnis.[2] Beim Galaxy Z Fold 8 wechselt das Format dagegen von 16:10 außen auf 4:3 innen. Für deutsche Websites zählt das Thema trotzdem: iOS kam im August 2026 hierzulande auf 27,59 % der Seitenaufrufe von Smartphones.[6]
Viewport Segments: Welche Browser melden den Falz?
Ein Falt-iPhone für 2.299 Euro kaufen genau die Kunden, um die viele Onlineshops werben. Websites mit Container Queries statt fester Handy-Breakpoints bestehen diesen Test schon heute.
— Michael Dobler, Herausgeber Dr. Web
Was sollten Agenturen und Website-Betreiber jetzt testen?
Teams sollten Layouts an der verfügbaren Breite ausrichten statt an Gerätetypen. Container Queries, fluide Schriftgrößen und getrennt berechnete Sicherheitsränder decken das iPhone Duo auch ohne Falz-Abfrage ab.
Feste Handy-Breakpoints passen nicht mehr, weil die Breite zwischen geschlossenem Gerät, aufgeklapptem Display und Split View wechselt. Für Responsive Design ohne starre Media Queries stehen Container Queries seit 2023 in allen großen Browsern bereit, fluide Schriftgrößen liefert Utopia mit clamp(). Vor dem Verkaufsstart lohnt ein Testlauf:
- Die Website im Simulator von Xcode 27.1 geschlossen, aufgeklappt, gedreht und in Split View neben einer zweiten App aufrufen.
- Seitenabstände mit
env(safe-area-inset-left)undenv(safe-area-inset-right)getrennt berechnen, statt einen Wert zu verdoppeln. - Buttons, Formularfelder und Menüs nicht fest in die Bildschirmmitte setzen, weil dort beim halben Falten der Knick liegt.
- Viewport Segments nur als Zusatz für Chrome einbauen und das Layout so anlegen, dass die Seite auch ohne diese Abfrage funktioniert.
Apple nimmt Vorbestellungen ab dem 16. Oktober an und liefert ab dem 23. Oktober aus.[2] Fehlt intern die Zeit für den Umbau, hilft der Webdesign-Agentur-Vergleich bei der Partnersuche.
Quellen
[1] Céss White, Code with Beto: „Is Your App Ready for iPhone Duo?“
[2] Apple Newsroom: „Apple stellt das iPhone Duo vor“
[3] Apple Developer: „Prepare your app for iPhone Duo“
[4] MDN Web Docs: „Viewport Segments API“
[5] WebKit auf GitHub: „Viewport Segments CSS and JS API“
[6] StatCounter: „Mobile Operating System Market Share Germany“
Mehr Newshunger?
- Galaxy Z Fold 8 wird breiter: Was faltbare Smartphones fürs Webdesign bedeuten
- Faltbares iPhone: Apples erste Keynote unter John Ternus
- 12 CSS-Funktionen, die Sie ohne Build-Schritt nutzen können
- Die letzte Zeile im responsiven CSS-Raster füllen
- CSS Units: Ein Nachschlagewerk misst alle 63 CSS-Einheiten live im Browser
- Apple platziert dauerhafte Werbung in den iPhone-Einstellungen
