Das Galaxy Z Fold 8 klappt sich von einem 5,5-Zoll-Außenschirm im 16:10-Format zu einem 7,6-Zoll-Innendisplay im 4:3-Format auf. Genau dieser Sprung zwischen zwei völlig unterschiedlichen Seitenverhältnissen ist das eigentliche Thema für alle, die Websites bauen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Wichtigste in Kürze
- Samsung hat auf der Galaxy Unpacked in London das Galaxy Z Fold 8, das erste Z Fold 8 Ultra und das Z Flip 8 vorgestellt; das Z Fold 8 startet bei 1.999 Euro.
- Apples erstes Falt-iPhone wird für September 2026 erwartet, mit einem ähnlichen Buch-Formfaktor.
- Faltbare wechseln im Betrieb zwischen zwei Seitenverhältnissen; feste Handy-Breakpoints greifen dann zu kurz.
- Für Viewport-Segmente gibt es eigene CSS-Media-Features, die in Chrome aber noch als Origin Trial laufen.
Was hat Samsung vorgestellt?
Drei Foldables: Das Z Fold 8 Ultra ist das erste Ultra-Modell der Reihe, mit 4,1 Millimetern im aufgeklappten Zustand das dünnste Z Fold bislang und 215 Gramm schwer. Das Galaxy Z Fold 8 kombiniert 7,6 Zoll innen mit 5,5 Zoll außen, wiegt 201 Gramm und setzt auf Qualcomms Snapdragon 8 Elite Gen 5 for Galaxy.[1]
Höhere Preise: Das Galaxy Z Fold 8 beginnt bei 1.999 Euro für 256 GB und reicht bis 2.599 Euro für 1 TB. Samsung hebt die Einstiegspreise gegenüber dem Vorgänger an.
Apple zieht nach: Berichten zufolge bringt Apple im September 2026 sein erstes Falt-iPhone mit einem rund 7,8 Zoll großen Buch-Display, zu einem Preis von über 2.000 US-Dollar (rund 1.740 Euro). Damit hätten beide Marktführer denselben Formfaktor im Programm.
Warum das fürs Webdesign zählt?
Zwei Viewports: Ein Foldable ist im selben Gerät mal schmales Handy, mal fast quadratisches Tablet. Ein Layout, das nur auf feste Handy-Breakpoints setzt, zeigt auf dem aufgeklappten 4:3-Schirm überlange Textzeilen oder verlorene Weißflächen. Beim richtigen Responsive Design gehört der aufgeklappte Zustand von Anfang an ins Konzept.
Neue Media-Features: Genau für diesen Fall gibt es die CSS-Media-Features horizontal-viewport-segments und vertical-viewport-segments, die abfragen, ob der Schirm gefaltet und in Segmente geteilt ist.[2] Chrome erprobt die Foldable-APIs bislang nur als Origin Trial, Edge unterstützt Viewport-Segmente schon länger.[3]
Über Breakpoints hinaus: Solange die APIs reifen, trägt vor allem ein sauberes Fundament: Ein Aufbau aus relativen CSS-Einheiten und Container Queries hält länger durch als pixelgenaue Gerätebreiten.
Faltbare Displays machen aus einem Gerät zwei Layout-Situationen. Websites, die das ignorieren, wirken auf dem aufgeklappten Schirm so lieblos wie eine Desktop-Seite auf dem ersten iPhone.
— Markus Seyfferth, Chefredakteur Dr. Web
Warum der Wechsel zwischen zwei Seitenverhältnissen zur Design-Aufgabe wird.
Die CSS-Media-Features für gefaltete Schirme
Was deutsche Agenturen jetzt tun sollten?
Jetzt testen: Die aufgeklappte 4:3-Ansicht gehört in den Responsive-Test, nicht nur Handy, Tablet und Desktop. Chrome und Edge bieten in den DevTools bereits Foldable-Geräteprofile, mit denen sich das ohne echtes Gerät prüfen lässt. Einen Überblick zur Lage liefert unsere Halbzeit-Bilanz der Webdesign-Trends 2026.
Flexibel bauen: Feste Spaltenbreiten und Pixel-Breakpoints lassen sich durch fluide Raster, clamp() und Container Queries ersetzen. So passt sich ein Layout jedem Segment an, auch dem, das erst 2027 auf den Markt kommt.
Prioritäten setzen: Noch ist der Marktanteil der Foldables klein. Sobald Apple im Herbst mitzieht, wird der aufgeklappte Schirm jedoch zur Ansicht, auf die Kunden achten.
Quellen
[1] Samsung Newsroom: „Galaxy Unpacked July 2026: A First Look at Galaxy Z Fold8 Ultra, Galaxy Z Fold8 and Galaxy Z Flip8“ ↩
[2] MDN Web Docs: „vertical-viewport-segments (CSS @media)“ ↩
[3] Chrome for Developers: „Origin trial for Foldable APIs“ ↩
Mehr Newshunger?
- Webdesign Trends 2026: Halbzeit-Bilanz nach sechs Monaten
- Media Queries: Mobile Versionen von Websites mit CSS3 erstellen
- CSS3: Viewport Units, neue Einheiten für responsive Designs
- Warum CSS über den Erfolg Ihrer Website mitentscheidet
- Was zum Teufel ist eigentlich Frontend? Klartext für Nicht-Techniker
