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.
Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügenDas 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
3 Quellen anzeigenQuellen ausblenden
- Samsung NewsroomGalaxy Unpacked July 2026: A First Look at Galaxy Z Fold8 Ultra, Galaxy Z Fold8 and Galaxy Z Flip8 ↩
- MDN Web Docsvertical-viewport-segments (CSS @media) ↩
- Chrome for DevelopersOrigin 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
