Am 9. September 2026 hat Apple das iPhone Duo vorgestellt, das erste faltbare iPhone. Für Handynutzer ist das ein spannendes neues Gerät. Für Website-Betreiber ist es vor allem eins: ein neues Bildschirmformat, auf das kaum eine Website vorbereitet ist.
Ich habe mir angeschaut, was das Duo für Websites bedeutet, welche Fehler typischerweise auftreten und wie du in wenigen Sekunden prüfst, ob deine eigene Seite betroffen ist.
Zwei Displays, zwei völlig verschiedene Formate
Das iPhone Duo klappt wie ein Buch auf. Zugeklappt nutzt man ein 5,4-Zoll-Außendisplay, aufgeklappt ein 7,6-Zoll-Innendisplay. Apple vergleicht das Gerät im geschlossenen Zustand mit der Größe eines Reisepasses.
Entscheidend für Websites sind nicht die Zoll-Angaben, sondern die Proportionen:
- Klassische iPhones sind lang und schmal, etwa im Verhältnis 1 : 2,2.
- Das Außendisplay des Duo ist deutlich breiter und kürzer, etwa 1 : 1,45.
- Das Innendisplay ist fast so proportioniert wie ein A4-Blatt und wird aufgeklappt quer gehalten. Es ist dann breiter als hoch.
Für den Browser bedeutet das grob folgende Anzeigeflächen (Viewport):
| Außendisplay | Innendisplay | |
|---|---|---|
| Größe | 5,4″ | 7,6″ |
| Auflösung | 1398 × 2034 px | 2670 × 1878 px |
| Viewport (ca.) | 466 × 678 | 890 × 626 (quer) |
Die Viewport-Werte sind aus der Auflösung berechnet und dienen als Näherung.
Dazu kommt: Nutzer wechseln mitten im Surfen zwischen beiden Formaten. Sie öffnen deine Seite zugeklappt, klappen das Gerät auf, und die Website muss sich sofort an eine ganz andere Fläche anpassen.
Warum viele Websites auf dem Duo schlecht aussehen
Die meisten Websites kennen im Kern drei Layouts: Smartphone, Tablet und Desktop. Das Duo passt in keines davon sauber hinein.
Ein Beispiel aus der Praxis: Elementor, der verbreitetste Page Builder für WordPress, schaltet standardmäßig bis 767 Pixel Breite auf das Mobil-Layout und bis 1024 Pixel auf das Tablet-Layout. Auf dem Duo heißt das:
- Zugeklappt (466 Pixel breit) sieht der Nutzer dein Mobil-Layout, aber auf einem Display, das viel kürzer ist als bei normalen Handys.
- Aufgeklappt (890 Pixel breit) sieht er dein Tablet-Layout, und zwar sowohl quer als auch hochkant.
Genau das Tablet-Layout ist bei vielen Websites das am wenigsten gepflegte. Es wird beim Bauen oft kurz durchgeklickt und dann vergessen, weil nur wenige Besucher mit Tablets kommen. Mit dem Duo ändert sich das.
Die 5 häufigsten Probleme
1. Hero-Bereiche mit voller Bildschirmhöhe Viele Startseiten beginnen mit einem Bild oder Video, das genau so hoch ist wie der Bildschirm. Auf dem aufgeklappten Duo im Querformat sind das nur rund 626 Pixel. Überschrift, Text und Button werden zusammengequetscht oder abgeschnitten.
2. Falsch beschnittene Bilder Hintergrundbilder werden automatisch auf die verfügbare Fläche zugeschnitten. Bei einem ungewohnten Format verschwindet dann schnell das Wichtigste aus dem Bild: der Kopf auf dem Teamfoto oder das Produkt auf dem Titelbild.
3. Ein vernachlässigtes Tablet-Layout Zu breite Textzeilen, zu kleine Abstände, Spalten, die unglücklich umbrechen, oder Elemente, die im Tablet-Modus versteckt wurden und dann fehlen. All das fällt auf dem Innendisplay sofort auf.
4. Navigation, die nicht zur Breite passt Bei 890 Pixeln Breite ist oft unklar, ob das Burger-Menü oder die volle Desktop-Navigation erscheinen soll. Manche Seiten zeigen ein halb gequetschtes Desktop-Menü, andere ein winziges Burger-Icon auf einem riesigen Display.
5. Elemente, die beim Aufklappen nicht mitziehen Slider, Galerien oder animierte Bereiche berechnen ihre Größe oft nur einmal beim Laden der Seite. Klappt der Nutzer das Duo danach auf, bleiben sie in der alten Größe hängen, bis die Seite neu geladen wird.
So testest du deine Website auf dem iPhone Duo
Du musst dir dafür kein Duo kaufen. Ich habe einen kostenlosen Tester gebaut, mit dem du jede Website direkt im Browser prüfen kannst:
Gib einfach deine URL ein und wechsle zwischen „Zugeklappt“ und „Aufgeklappt“. Das Innendisplay kannst du zusätzlich drehen. Eine Anmeldung brauchst du nicht.
Achte beim Test vor allem auf diese Punkte:
- Ist die wichtigste Botschaft ganz oben vollständig sichtbar, ohne zu scrollen?
- Sind Bilder sinnvoll zugeschnitten?
- Funktioniert die Navigation in beiden Zuständen?
- Wirken Textzeilen auf dem Innendisplay nicht zu lang?
- Stimmen die Abstände, oder wirkt etwas gequetscht oder verloren?
Für die finale Kontrolle ist ein echtes Gerät trotzdem sinnvoll. Schriftdarstellung, Browserleisten und Gesten kann kein Online-Tester vollständig nachbilden.
Was du konkret verbessern kannst
Die gute Nachricht: Die meisten Probleme lassen sich ohne kompletten Relaunch beheben.
- Hero-Höhen begrenzen. Statt „volle Bildschirmhöhe“ lieber eine Mindesthöhe festlegen, die sich am Inhalt orientiert.
- Tablet-Layout ernst nehmen. Jede wichtige Seite einmal gezielt in der Tablet-Ansicht durchgehen und die Abstände, Spalten und Schriftgrößen anpassen.
- Fließende Schriftgrößen nutzen. Überschriften, die sich stufenlos an die Breite anpassen, statt an festen Umbruchpunkten zu springen.
- Bildausschnitte festlegen. In Elementor und den meisten Themes kannst du den Fokuspunkt eines Hintergrundbilds bestimmen, damit das Wichtige immer im Bild bleibt.
- Textbreite begrenzen. Absätze sollten auch auf breiten Displays nicht über die volle Breite laufen.
- Größenwechsel testen. Seite öffnen, dann das Fenster oder Gerät drehen. Alles, was danach nicht mehr passt, reagiert nicht auf Größenänderungen.
Fazit
Das iPhone Duo ist erst der Anfang. Faltbare Geräte werden häufiger, und mit ihnen ungewohnte Bildschirmformate. Websites, die nur für „Handy“ und „Desktop“ gebaut sind, sehen darauf schnell unprofessionell aus. Und der erste Eindruck entscheidet oft, ob ein Besucher bleibt oder zur Konkurrenz geht.
Teste deine Seite jetzt kostenlos im iPhone Duo Tester. Wenn dir dabei etwas auffällt und du Unterstützung möchtest, melde dich gern. Ich bin Vasi, Webdesigner aus Leipzig, und optimiere Websites so, dass sie auf jedem Display überzeugen, vom kleinen Smartphone bis zum aufgeklappten Foldable.