Kostenlos prüfen

Wie baue ich meine Website so, dass sie auf dem faltbaren iPhone Duo funktioniert?

Zuletzt aktualisiert:

12 Minuten Lesezeit
Bei Google bevorzugen
Kurzantwort

Du baust sie so, dass sie jede Breite aushält, statt auf Gerätemaße zu zielen. Das iPhone Duo hat zwei Displays, mehrere Lagen und einen geteilten Bildschirm, und Safari kann Deiner Seite nicht einmal sagen, ob das Gerät auf- oder zugeklappt ist. Deshalb zählen fließende Layouts, Container Queries, links und rechts getrennt behandelte Safe Areas und nichts Unverzichtbares in der Bildschirmmitte.

Fünf Prüfschritte nacheinander: vier Breiten von 466 bis 951 CSS-Pixeln durchziehen, die Höhe auf 626 Pixel stellen, die geteilte Lage bei 445 bis 475 Pixeln nachstellen, die Bildschirmmitte von Bedienelementen freiräumen, sichere Bereiche links und rechts getrennt abfangen.
Der Prüfablauf in fünf Schritten. Alles davon geht heute im Browser, ganz ohne Gerät.

Welche Bildschirmformate und CSS-Viewports hat das iPhone Duo?

Erst das Unangenehme: Ich hatte dieses Gerät nie in der Hand, und niemand sonst hatte es. Apple hat das iPhone Duo, das faltbare iPhone, das vorher als iPhone Fold gehandelt wurde, am 9. September 2026 vorgestellt. Vorbestellt wird ab dem 16. Oktober, ausgeliefert ab dem 23. Oktober 2026, mit iOS 27.1. Alles hier kommt aus Apples eigenen Angaben, nicht aus einem Testgerät.

Apple nennt zwei Displays: außen 5,4 Zoll mit 1398 x 2034 Pixeln bei 460 ppi, innen 7,6 Zoll mit 1878 x 2670 Pixeln bei 430 ppi. Das Gehäuse ist aufgeklappt 164,6 mm breit und nur 117,8 mm hoch, das Innendisplay liegt also quer. Die knappe Achse ist dort die Höhe.

Beim CSS-Viewport sind sich die Quellen für den zugeklappten Zustand einig: 466 x 678 Pixel bei einem Device Pixel Ratio von 3, quer 678 x 466. Für das Innendisplay stehen zwei Zahlen gegeneinander, und ich kann sie nicht auflösen. Die eine teilt das Panel durch drei und kommt auf 890 x 626. Die andere liest die Vorgabe aus App Store Connect, Renderziel 2007 x 2853 Pixel, also 951 x 669 Punkte bei effektiv 2,81. Gemessen hat es niemand.

Gleich bleibt in beiden Fällen das Seitenverhältnis: 890 durch 626 ergibt 1,4217, 951 durch 669 ergibt 1,4215. Aufgeklappt rechnest Du also mit 1,42, zugeklappt mit 1,45, und das liegt ein halbes Prozent neben der Wurzel aus zwei, also am Seitenverhältnis der A-Formate. Vor allem folgt daraus die wichtigste Regel dieses Guides, nämlich keine gerätespezifischen Breakpoints. Wer sich heute auf eine der beiden Viewport-Zahlen festlegt, baut den Fehler ein, vor dem dieser Text warnt.

Die Formate im Überblick:

  1. Außendisplay, zugeklappt5,4 Zoll, physisch 1398 x 2034 Pixel bei 460 ppi. CSS-Viewport 466 x 678 bei DPR 3, quer 678 x 466. Verhältnis 1,45.
  2. Innendisplay, aufgeklappt7,6 Zoll, physisch 1878 x 2670 Pixel bei 430 ppi. CSS-Viewport offen: 890 x 626 bei DPR 3 oder 951 x 669 Punkte bei effektiv 2,81. Verhältnis 1,42 in beiden Lesarten.
  3. Lagen und OrientierungAufgeklappt liegt das Innendisplay quer, und es ignoriert die Orientierungsvorgaben einer App.
  4. Geteilter BildschirmFest halbiert, kein ziehbarer Trenner, nur innen, auch mit zwei Safari-Fenstern. Je Fenster rund 445 bis 475 CSS-Pixel, die schmalste Lage auf diesem Gerät.
  5. Die vier Breiten, die zählen466 zugeklappt hochkant, 678 zugeklappt quer, 890 bis 951 aufgeklappt quer, 445 bis 475 geteilt.

Wo liegt die Falz, und warum kann Deine Website sie nicht abfragen?

Die Falz liegt mittig. Apple beschreibt sie im eigenen Tech Talk als den Bereich, an dem sich das Display durch die Mitte krümmt, und führt sie als Teilungsregion. Flach aufgeklappt hat sie die Breite null, aktiv wird sie erst, wenn jemand das Gerät wie ein Buch hält. Eine native App fragt das zur Laufzeit ab und bekommt gesagt, wo sie nichts hinlegen darf.

Deine Website bekommt davon nichts. Es gibt einen Web-Standard für faltbare Geräte, CSS Viewport Segments, und die Device Posture API. Chrome liefert Viewport Segments seit Version 138 vom 24. Juni 2025 und Device Posture seit Version 132 vom 14. Januar 2025, Edge zieht mit. Firefox nicht, Safari nicht. Und auf dem iPhone ist Safari die einzige Grundlage.

Wie ernst Apple das nimmt, zeigt eine einzige Zahl. Die Anfrage an WebKit, überhaupt eine Position zu Viewport Segments zu beziehen, steht seit dem 6. März 2024 offen, ohne jedes Positions-Label, und darunter steht genau ein Kommentar, vom 30. April 2025: Any update on the position? Die Release Notes zu Safari 27 vom 14. September 2026 erwähnen Viewport Segments und Device Posture kein einziges Mal, und zu Safari 27.1, der Version des Duo, gibt es noch gar keine.

Für Dich heißt das: Du kannst die Falz nicht umfließen, weil Du weder weißt, wo sie liegt, noch ob gerade gefaltet wird. Also baust Du so, dass es keine Rolle spielt, nämlich nichts Unverzichtbares in der Bildschirmmitte und ein Layout, das jede Breite aushält. Eine Zahl zur Breite der Falz findest Du hier nicht, weil Apple keine veröffentlicht.

Welche Safezones braucht das Duo, und warum sind links und rechts nicht gleich?

Hier hat Apple den entscheidenden Satz selbst gesagt, im Tech Talk zur Vorbereitung von Apps auf das iPhone Duo: Sichere Bereiche und Layout-Ränder seien auf diesem Gerät oft asymmetrisch, man solle jede Seite unabhängig behandeln und im geteilten Bildschirm testen. Das gilt wortgleich für CSS, weil env(safe-area-inset-left) und env(safe-area-inset-right) dieselbe Geometrie abbilden.

Konkrete Zahlen für die Insets findest Du nirgends. Die Spezifikation sagt ausdrücklich, dass der Browser dieses Rechteck selbst wählt, und Apple veröffentlicht keine festen Werte. Sie sind zur Laufzeit abzufragen, genau dafür gibt es die Funktion. Zahlen aus Foren gehören in kein Stylesheet.

Drei Griffe, mit denen Du sicher bist:

  1. viewport-fit=cover setzenOhne diesen Wert im Viewport-Meta legt Safari die Seite in den sicheren Bereich, und die Insets melden null.
  2. Links und rechts getrennt abfangenpadding-left als Maximum aus Deinem Mindestabstand und env(safe-area-inset-left), padding-right genauso rechts. Nie ein Wert für beide Seiten.
  3. Oben und unten mitnehmenKamera-Aussparung und Home-Indikator liegen je nach Zustand anders. Auch dort Abfrage statt Zahl.

Warum fällt das iPhone Duo durch Dein Breakpoint-Raster, und was passiert beim Aufklappen?

Nimm die vier Breiten von oben und halte sie gegen Dein Raster. Bootstrap schaltet bei 576, 768, 992 und 1200 Pixeln, Tailwind bei 640, 768, 1024 und 1280. Die Lücke: aufgeklappt und quer liegst Du bei 890 bis 951 Pixeln, also zwischen den beiden meistgeprüften Breiten. Ein Layout, das bei 768 auf zwei Spalten geht und erst bei 1024 auf drei, verbringt den gesamten Innenbereich in einem Zustand, den niemand angesehen hat.

Der geteilte Bildschirm dreht es um, denn dort bekommt Deine Seite mit rund 445 bis 475 Pixeln die Handy-Regeln, und zwar auf 7,6 Zoll Diagonale. Die Antwort darauf ist kein weiterer Umschaltpunkt, sondern die Bauweise. Container Queries sind hier das ehrlichere Werkzeug, weil eine Komponente dann auf ihren eigenen Platz reagiert statt auf den Bildschirm.

Der Punkt, den ich am häufigsten unterschätzt sehe: Auf diesem Gerät verändert sich die Größe des Viewports, während die Seite offen bleibt. Kein Neuladen, jemand klappt einfach auf. Jede Breite, die Dein JavaScript einmal gemessen und weggespeichert hat, ist danach falsch. Hol sie beim Ändern der Größe neu, und nicht über orientationchange, denn dieses Ereignis gilt als veraltet. Was beim Falten sonst passiert, steht in keiner Quelle von Apple, WebKit oder MDN. Das schreibe ich lieber hin, als es zu erfinden.

Eine Klarstellung zur Höhe: Nimm 100dvh statt 100vh, aber nicht, weil das am Falten etwas verbessert, denn beim Ändern der Größe rechnen beide neu. Der Unterschied ist die Bezugsgröße, die Spezifikation definiert vh gleichbedeutend mit lvh, also so, als wäre die Adressleiste eingefahren. Aufgeklappt quer ist die Höhe ohnehin die knappe Achse, ein formatfüllender Hero verschluckt dort die erste Bildschirmseite.

Welche Bildbreiten braucht Dein srcset auf dem iPhone Duo?

Die Rechnung ist einfach und kommt ohne die strittige Viewport-Zahl aus. Was zählt, sind die Panelbreiten, und die stehen bei Apple: 1398 x 2034 Pixel außen, 1878 x 2670 Pixel innen. Über das Device Pixel Ratio formuliere ich es bewusst nicht, weil offen ist, ob Safari innen 3 oder 2,81 meldet. Die Panelbreite dagegen ist eine Herstellerangabe.

Dazu gehört ein sauberes sizes-Attribut. Das Duo ist genau der Fall, in dem eine Seite zwischen voller und halber Breite wechselt, ohne neu zu laden.

Drei Stufen, die in Deinem srcset vorkommen sollten:

  1. Rund 1400 PixelFür das Außendisplay mit 1398 Pixeln Breite.
  2. Rund 1900 bis 2000 PixelFür das Innendisplay hochkant, Renderziel 1878 oder 2007 Pixel.
  3. Rund 2700 bis 2850 PixelFür das Innendisplay quer über die volle Breite. Wer bei 1920 aufhört, liefert hier ein hochgerechnetes Bild an einen Schirm mit 430 ppi.

Wo dürfen Buttons und Formularfelder auf einem faltbaren iPhone nicht liegen?

Apple beantwortet diese Frage für native Apps direkt: Buttons sind schwer zu treffen, wenn sie genau in der Falz landen. Eine App kann die Falz abfragen und verschiebt sie weg, Deine Website kann das nicht. Die Ausnahme, die Apple selbst macht, nimmt Druck heraus: durchlaufender Inhalt zum Scrollen, also Artikel, Feeds und Listen, wird nicht verschoben. Kritisch ist nur, was jemand treffen muss.

Fürs Web leite ich daraus eine Regel ab, die Apple so nicht formuliert hat: keine einzelne, unverzichtbare Bedienfläche genau in der Mitte, sobald Deine Seite breit läuft.

An der Größe der Flächen ändert das Gerät dagegen nichts. Apples Richtlinie nennt mindestens 44 x 44 Punkte, die WCAG 2.2 fordert auf Stufe AA mindestens 24 x 24 CSS-Pixel. Was sich ändert, ist die Erreichbarkeit, und das ist meine Ableitung aus der Gehäusebreite: aufgeklappt sind es 164,6 mm von Kante zu Kante, mehr als ein Daumen einhändig überstreicht.

Was das im Alltag heißt:

  1. Keine zentrierten Solo-ButtonsSetz den Knopf versetzt oder gib ihm einen Partner daneben.
  2. Keine Formularfelder exakt mittigBetrifft vor allem Suchzeile und Newsletter-Anmeldung.
  3. Keine Schieberegler über die MitteEin Griff in der Krümmung lässt sich schlecht fassen.
  4. Zweispaltig ist robustSitzt ohnehin ein Spalt in der Mitte, fällt die Falz mit ihm zusammen. Apple rät aus demselben Grund zu mehr Abstand rund um das Scharnier.

Wie testest Du Deine Website, bevor das Gerät ausgeliefert wird?

Prüfen kannst Du heute mehr, als es aussieht, ganz ohne Gerät. Der Simulator kommt mit Xcode 27.1, den Apple für später in diesem Monat ankündigt. Als Testgrößen werden die Punktmaße 669 x 951, 951 x 669 und 466 x 678 genannt.

Bis dahin arbeitest Du mit den Viewport-Werkzeugen Deines Browsers, und zwar anders als üblich. Stell nicht vier gespeicherte Geräte ein und klick sie durch, sondern zieh die Breite langsam von etwa 400 auf 1000 Pixel. Sprünge und überlappende Elemente zeigen sich in der Bewegung, nicht in vier Momentaufnahmen. Setz die Höhe einmal auf 626 Pixel bei großer Breite, und wenn dort nur noch Dein Hero steht, hast Du den Fall gefunden.

Offen bleibt, was offen ist: der echte CSS-Viewport des Innendisplays, das tatsächliche Device Pixel Ratio, die Inset-Werte und die Ereignisse beim Falten. Das misst der Erste, der ein Gerät in der Hand hat, frühestens am 23. Oktober 2026.

Die Prüfliste, die ich abarbeiten würde:

  1. Vier Breiten einzeln ansehen466, 678, 890 und 951 CSS-Pixel, dazu die geteilte Lage bei 445 bis 475.
  2. Beide Lagen prüfenJede Breite hochkant und quer, also auch 626 x 890 und 669 x 951.
  3. Die Mitte abklopfenEinen senkrechten Strich durch die Bildschirmmitte denken und prüfen, was er trifft.
  4. Safe Areas gegenprüfenMit viewport-fit=cover nachsehen, ob links und rechts getrennt laufen.
  5. Beim Ändern der Größe messenDie Seite offen lassen und das Fenster verändern, statt neu zu laden.

Was heißt ein kaputtes Duo-Layout für Deine Sichtbarkeit bei Google und in KI-Antworten?

Kurz und ehrlich: Ich habe keine Studie, die Dir sagt, wie viele Positionen ein kaputtes Layout auf einem faltbaren Gerät kostet. Es gibt sie nicht, das Gerät ist sechs Tage alt. Wer Dir heute eine Zahl nennt, hat sie erfunden.

Was ich sagen kann, ist die Richtung. SEO, AEO und GEO wachsen zu einer einzigen Disziplin zusammen, weil Google in Entitäten denkt und die KI-Systeme es ebenso tun. Es geht immer weniger darum, mit einer Seite auf einen Platz zu kommen, und immer mehr darum, die Entität zu werden, der die Crawler trauen und die sie weiterempfehlen. Eine Seite, die auf einem Gerät halb verdeckt oder unbedienbar ist, liefert weniger von dem, was ein Antwortsystem zitieren kann. Worauf es sonst noch ankommt, steht in worauf Du bei der KI-Suchoptimierung achten solltest.

Der Gewinn dieses Guides liegt deshalb nicht beim iPhone Duo, sondern in der Bauweise. Eine Seite, die jede Breite aushält, weil sie keine bestimmte erwartet, funktioniert auch auf dem nächsten Gerät, das heute noch niemand kennt. Derselbe Gedanke steht hinter einer KI-optimierten Website, und ob Deine Seite in KI-Antworten vorkommt, zeigt Dir KI-Sichtbarkeit messen.

Häufige Fragen

Welche CSS-Viewport-Breite hat das iPhone Duo zugeklappt und aufgeklappt?
Zugeklappt sind es 466 x 678 CSS-Pixel bei einem Device Pixel Ratio von 3, quer 678 x 466. Aufgeklappt ist die Zahl offen: eine Lesart kommt auf 890 x 626, die andere auf 951 x 669 Punkte bei effektiv 2,81. Gemessen hat es niemand. Verlässlich ist nur das Seitenverhältnis 1,42.
Kann eine Website erkennen, ob das iPhone Duo auf- oder zugeklappt ist?
Nein. Die dafür vorgesehenen Schnittstellen, CSS Viewport Segments und die Device Posture API, gibt es nur in Chrome und Edge. Safari unterstützt beide nicht, und auf dem iPhone ist Safari die einzige Grundlage. Die Anfrage an WebKit liegt seit dem 6. März 2024 unbeantwortet. Deine Seite merkt nur, dass sich die Fenstergröße verändert.
Muss ich meine Website für das iPhone Duo umbauen?
Meistens nicht umbauen, sondern nachschärfen. Wenn Dein Layout fließend ist und nichts Unverzichtbares genau in der Mitte liegt, kommst Du gut durch. Drei Stellen solltest Du ansehen: die Breite zwischen 890 und 951 Pixeln, die Höhe bei rund 626 Pixeln, an der ein formatfüllender Hero die Seite verschluckt, und die geteilte Lage bei 445 bis 475 Pixeln.
Welche Bildgrößen braucht das iPhone Duo im srcset?
Drei Stufen decken das Gerät ab: rund 1400 Pixel für das Außendisplay, rund 1900 bis 2000 Pixel für das Innendisplay hochkant und rund 2700 bis 2850 Pixel für das Innendisplay quer. Wer bei 1920 Pixeln aufhört, liefert quer ein hochgerechnetes Bild an einen Schirm mit 430 ppi.
Ab wann ist das iPhone Duo im Handel?
Apple hat das Gerät am 9. September 2026 vorgestellt. Vorbestellt wird ab dem 16. Oktober 2026, ausgeliefert ab dem 23. Oktober 2026, mit iOS 27.1. Bis dahin hat niemand ein Gerät in der Hand, und alle kursierenden Werte zum CSS-Viewport des Innendisplays sind Rechnungen, keine Messungen.

Quellen

Du willst wissen, ob ChatGPT, Perplexity und Gemini Dein Unternehmen heute nennen? Ich stelle drei Kauffragen aus Deiner Branche und schicke Dir die Antworten im Wortlaut.

Prüfen, ob ChatGPT Dich nennt

Kostenlos, kein Verkaufsgespräch, Antwort in zwei Werktagen.