{"id":3065,"date":"2026-09-26T02:47:06","date_gmt":"2026-09-26T00:47:06","guid":{"rendered":"https:\/\/vasilidesign.com\/?p=3065"},"modified":"2026-09-26T02:47:06","modified_gmt":"2026-09-26T00:47:06","slug":"iphone-duo-ist-deine-website-bereit-fuer-das-faltbare-iphone","status":"publish","type":"post","link":"https:\/\/vasilidesign.com\/en\/2026\/09\/26\/iphone-duo-ist-deine-website-bereit-fuer-das-faltbare-iphone\/","title":{"rendered":"iPhone Duo: Ist deine Website bereit f\u00fcr das faltbare iPhone?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Am 9. September 2026 hat Apple das iPhone Duo vorgestellt, das erste faltbare iPhone. F\u00fcr Handynutzer ist das ein spannendes neues Ger\u00e4t. F\u00fcr Website-Betreiber ist es vor allem eins: ein neues Bildschirmformat, auf das kaum eine Website vorbereitet ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ich habe mir angeschaut, was das Duo f\u00fcr Websites bedeutet, welche Fehler typischerweise auftreten und wie du in wenigen Sekunden pr\u00fcfst, ob deine eigene Seite betroffen ist.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zwei Displays, zwei v\u00f6llig verschiedene Formate<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das iPhone Duo klappt wie ein Buch auf. Zugeklappt nutzt man ein <strong>5,4-Zoll-Au\u00dfendisplay<\/strong>, aufgeklappt ein <strong>7,6-Zoll-Innendisplay<\/strong>. Apple vergleicht das Ger\u00e4t im geschlossenen Zustand mit der Gr\u00f6\u00dfe eines Reisepasses.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entscheidend f\u00fcr Websites sind nicht die Zoll-Angaben, sondern die Proportionen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Klassische iPhones<\/strong> sind lang und schmal, etwa im Verh\u00e4ltnis 1 : 2,2.<\/li>\n\n\n\n<li><strong>Das Au\u00dfendisplay des Duo<\/strong> ist deutlich breiter und k\u00fcrzer, etwa 1 : 1,45.<\/li>\n\n\n\n<li><strong>Das Innendisplay<\/strong> ist fast so proportioniert wie ein A4-Blatt und wird aufgeklappt quer gehalten. Es ist dann breiter als hoch.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr den Browser bedeutet das grob folgende Anzeigefl\u00e4chen (Viewport):<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><\/th><th>Au\u00dfendisplay<\/th><th>Innendisplay<\/th><\/tr><\/thead><tbody><tr><td>Gr\u00f6\u00dfe<\/td><td>5,4\u2033<\/td><td>7,6\u2033<\/td><\/tr><tr><td>Aufl\u00f6sung<\/td><td>1398 \u00d7 2034 px<\/td><td>2670 \u00d7 1878 px<\/td><\/tr><tr><td>Viewport (ca.)<\/td><td>466 \u00d7 678<\/td><td>890 \u00d7 626 (quer)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Die Viewport-Werte sind aus der Aufl\u00f6sung berechnet und dienen als N\u00e4herung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dazu kommt: Nutzer wechseln mitten im Surfen zwischen beiden Formaten. Sie \u00f6ffnen deine Seite zugeklappt, klappen das Ger\u00e4t auf, und die Website muss sich sofort an eine ganz andere Fl\u00e4che anpassen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Warum viele Websites auf dem Duo schlecht aussehen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die meisten Websites kennen im Kern drei Layouts: Smartphone, Tablet und Desktop. Das Duo passt in keines davon sauber hinein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Beispiel aus der Praxis: Elementor, der verbreitetste Page Builder f\u00fcr WordPress, schaltet standardm\u00e4\u00dfig bis 767 Pixel Breite auf das Mobil-Layout und bis 1024 Pixel auf das Tablet-Layout. Auf dem Duo hei\u00dft das:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Folded<\/strong> (466 Pixel breit) sieht der Nutzer dein Mobil-Layout, aber auf einem Display, das viel k\u00fcrzer ist als bei normalen Handys.<\/li>\n\n\n\n<li><strong>Unfolded<\/strong> (890 Pixel breit) sieht er dein <strong>Tablet-Layout<\/strong>, und zwar sowohl quer als auch hochkant.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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 \u00e4ndert sich das.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die 5 h\u00e4ufigsten Probleme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Hero-Bereiche mit voller Bildschirmh\u00f6he<\/strong> 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. \u00dcberschrift, Text und Button werden zusammengequetscht oder abgeschnitten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Falsch beschnittene Bilder<\/strong> Hintergrundbilder werden automatisch auf die verf\u00fcgbare Fl\u00e4che zugeschnitten. Bei einem ungewohnten Format verschwindet dann schnell das Wichtigste aus dem Bild: der Kopf auf dem Teamfoto oder das Produkt auf dem Titelbild.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Ein vernachl\u00e4ssigtes Tablet-Layout<\/strong> Zu breite Textzeilen, zu kleine Abst\u00e4nde, Spalten, die ungl\u00fccklich umbrechen, oder Elemente, die im Tablet-Modus versteckt wurden und dann fehlen. All das f\u00e4llt auf dem Innendisplay sofort auf.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Navigation, die nicht zur Breite passt<\/strong> Bei 890 Pixeln Breite ist oft unklar, ob das Burger-Men\u00fc oder die volle Desktop-Navigation erscheinen soll. Manche Seiten zeigen ein halb gequetschtes Desktop-Men\u00fc, andere ein winziges Burger-Icon auf einem riesigen Display.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Elemente, die beim Aufklappen nicht mitziehen<\/strong> Slider, Galerien oder animierte Bereiche berechnen ihre Gr\u00f6\u00dfe oft nur einmal beim Laden der Seite. Klappt der Nutzer das Duo danach auf, bleiben sie in der alten Gr\u00f6\u00dfe h\u00e4ngen, bis die Seite neu geladen wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">So testest du deine Website auf dem iPhone Duo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Du musst dir daf\u00fcr kein Duo kaufen. Ich habe einen kostenlosen Tester gebaut, mit dem du jede Website direkt im Browser pr\u00fcfen kannst:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2192 <a href=\"https:\/\/vasilidesign.com\/en\/iphone-duo-test\/\">iPhone Duo Website testen<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gib einfach deine URL ein und wechsle zwischen \u201eZugeklappt\u201c und \u201eAufgeklappt\u201c. Das Innendisplay kannst du zus\u00e4tzlich drehen. Eine Anmeldung brauchst du nicht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Achte beim Test vor allem auf diese Punkte:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ist die wichtigste Botschaft ganz oben vollst\u00e4ndig sichtbar, ohne zu scrollen?<\/li>\n\n\n\n<li>Sind Bilder sinnvoll zugeschnitten?<\/li>\n\n\n\n<li>Funktioniert die Navigation in beiden Zust\u00e4nden?<\/li>\n\n\n\n<li>Wirken Textzeilen auf dem Innendisplay nicht zu lang?<\/li>\n\n\n\n<li>Stimmen die Abst\u00e4nde, oder wirkt etwas gequetscht oder verloren?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr die finale Kontrolle ist ein echtes Ger\u00e4t trotzdem sinnvoll. Schriftdarstellung, Browserleisten und Gesten kann kein Online-Tester vollst\u00e4ndig nachbilden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was du konkret verbessern kannst<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die gute Nachricht: Die meisten Probleme lassen sich ohne kompletten Relaunch beheben.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hero-H\u00f6hen begrenzen.<\/strong> Statt \u201evolle Bildschirmh\u00f6he\u201c lieber eine Mindesth\u00f6he festlegen, die sich am Inhalt orientiert.<\/li>\n\n\n\n<li><strong>Tablet-Layout ernst nehmen.<\/strong> Jede wichtige Seite einmal gezielt in der Tablet-Ansicht durchgehen und die Abst\u00e4nde, Spalten und Schriftgr\u00f6\u00dfen anpassen.<\/li>\n\n\n\n<li><strong>Flie\u00dfende Schriftgr\u00f6\u00dfen nutzen.<\/strong> \u00dcberschriften, die sich stufenlos an die Breite anpassen, statt an festen Umbruchpunkten zu springen.<\/li>\n\n\n\n<li><strong>Bildausschnitte festlegen.<\/strong> In Elementor und den meisten Themes kannst du den Fokuspunkt eines Hintergrundbilds bestimmen, damit das Wichtige immer im Bild bleibt.<\/li>\n\n\n\n<li><strong>Textbreite begrenzen.<\/strong> Abs\u00e4tze sollten auch auf breiten Displays nicht \u00fcber die volle Breite laufen.<\/li>\n\n\n\n<li><strong>Gr\u00f6\u00dfenwechsel testen.<\/strong> Seite \u00f6ffnen, dann das Fenster oder Ger\u00e4t drehen. Alles, was danach nicht mehr passt, reagiert nicht auf Gr\u00f6\u00dfen\u00e4nderungen.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das iPhone Duo ist erst der Anfang. Faltbare Ger\u00e4te werden h\u00e4ufiger, und mit ihnen ungewohnte Bildschirmformate. Websites, die nur f\u00fcr \u201eHandy\u201c und \u201eDesktop\u201c gebaut sind, sehen darauf schnell unprofessionell aus. Und der erste Eindruck entscheidet oft, ob ein Besucher bleibt oder zur Konkurrenz geht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teste deine Seite jetzt kostenlos im <strong><a href=\"https:\/\/vasilidesign.com\/en\/iphone-duo-test\/\">iPhone Duo Tester<\/a><\/strong>. Wenn dir dabei etwas auff\u00e4llt und du Unterst\u00fctzung m\u00f6chtest, melde dich gern. Ich bin Vasi, Webdesigner aus Leipzig, und optimiere Websites so, dass sie auf jedem Display \u00fcberzeugen, vom kleinen Smartphone bis zum aufgeklappten Foldable.<\/p>","protected":false},"excerpt":{"rendered":"<p>Am 9. September 2026 hat Apple das iPhone Duo vorgestellt, das erste faltbare iPhone. F\u00fcr Handynutzer ist das ein spannendes neues Ger\u00e4t. F\u00fcr 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\u00fcr Websites bedeutet, welche Fehler typischerweise auftreten und wie [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3065","post","type-post","status-publish","format-standard","hentry","category-strategie-positionierung"],"_links":{"self":[{"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/posts\/3065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/comments?post=3065"}],"version-history":[{"count":1,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/posts\/3065\/revisions"}],"predecessor-version":[{"id":3066,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/posts\/3065\/revisions\/3066"}],"wp:attachment":[{"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/media?parent=3065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/categories?post=3065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/tags?post=3065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}