Faltbare Geräte sind jetzt Mainstream
Apples kürzliche Ankündigung des iPhone Duo zum Preis von 1.999 US-Dollar markiert einen entscheidenden Moment für die Webentwicklung. Dieses Gerät, das am 23. Oktober 2026 auf den Markt kommt und über ein 5,4-Zoll-Außendisplay sowie ein 7,6-Zoll-Innendisplay verfügt, katapultiert faltbare Telefone von einer Nischenkuriosität in die Mainstream-Realität für alle Webentwickler. Diese anpassungsfähigen Formfaktoren zu ignorieren, ist keine Option mehr.
Glücklicherweise haben Browser-Entwickler diesen Wandel vorhergesehen. Wir haben jetzt eine leistungsstarke CSS-Media-Query, @media (device-posture: folded), die speziell für diese Geräte entwickelt wurde. Diese Abfrage erkennt, ob sich ein Gerät in einem folded-Zustand befindet, wie ein Buch oder ein Miniatur-Laptop, anstatt in seiner continuous flachen Haltung. Sie ermöglicht es Entwicklern, gezielte Stile für optimale Benutzererfahrungen über verschiedene physische Konfigurationen hinweg anzuwenden.
Stellen Sie sich einen Blog-Beitrag vor. Auf einem flachen, continuous Bildschirm funktioniert ein einspaltiges Layout perfekt und maximiert die Lesbarkeit. Wenn der Benutzer sein iPhone Duo jedoch in eine buchähnliche Position faltet, kann diese einzelne Spalte über den Knick hinweg unangenehm zu lesen sein. Mit device-posture können Sie einfach zu einem zweispaltigen Layout wechseln, das den Inhalt elegant auf jedem Bildschirmsegment platziert und die Benutzerfreundlichkeit und Interaktion sofort verbessert.
Diese einfache Anpassung demonstriert die unmittelbare Leistungsfähigkeit der device-posture-Media-Query. Entwickler können jetzt responsive Designs erstellen, die sich nicht nur an die Bildschirmgröße, sondern auch an das physische Interaktionsmodell des Geräts selbst anpassen. Chrome unterstützt diese Funktionen bereits, und der iPhone Duo-Simulator von Safari enthält sie, wenn auch hinter einem Flag, was auf ihre baldige weitreichende Verfügbarkeit hinweist.
Machen Sie Ihre Website falt-bewusst
Über statische CSS-Regeln hinaus glänzen Weberlebnisse für faltbare Geräte wirklich durch dynamische Interaktionen. Die Device Posture API für JavaScript ermöglicht es Ihrer Website, darauf zu reagieren, wie ein Benutzer sein iPhone Duo oder ein anderes faltbares Gerät hält, und bietet so eine reichhaltigere, intuitivere Erfahrung. Sie geht über das bloße Styling für flache oder gefaltete Zustände hinaus und ermöglicht Reaktionen in Echtzeit.
Ihre Anwendung kann auf ein change-Ereignis bezüglich der Haltung des Geräts warten und Aktionen auslösen, wann immer der Zustand des Telefons zwischen continuous (flach) und folded wechselt. Das bedeutet, dass Sie ein Video automatisch pausieren können, wenn ein Benutzer beginnt, sein Telefon zu schließen, oder den Fortschritt eines Formulars sofort speichern können, während er die Haltung ändert. Stellen Sie sich eine Rezept-App vor, die Zutaten auf einem Bildschirm und Anweisungen auf dem anderen anzeigt und den Inhalt dynamisch aufteilt, während sich das Gerät faltet.
Das Erkennen dieser Änderungen des Faltzustands mit JavaScript ist unkompliziert. Hier ist ein grundlegender Ausschnitt:
if ('ondeviceposturechange' in window) { window.addEventListener('deviceposturechange', (event) => { const currentPosture = event.target.devicePosture.type; console.log(`Device posture changed to: ${currentPosture}`); // Implementieren Sie hier dynamische Aktionen basierend auf currentPosture ('continuous' oder 'folded') });
}Dieser Event-Listener liefert den devicePosture.type, was es Ihnen ermöglicht, interaktivere und intuitivere faltbare Weberlebnisse zu erstellen. Chrome und Samsung Internet unterstützen diese API bereits vollständig, während der iPhone Duo-Simulator von Safari sie hinter einem Feature-Flag enthält, was auf zukünftige Unterstützung für Apples 1.999-Dollar-Gerät hindeutet.
Design für zwei Bildschirme gleichzeitig
Faltbare Geräte führen ein faszinierendes Konzept ein: Viewport Segments. Wenn ein iPhone Duo gefaltet ist, präsentiert es zwei unterschiedliche Anzeigebereiche, die jeweils unabhängig voneinander steuerbar sind. Dies geht über die bloße Reaktion auf ein Falten hinaus; Sie können echte Dual-Screen-Erlebnisse entwerfen und jedes Segment als eigene Leinwand behandeln.
Um Inhalte präzise zu platzieren, verwenden Entwickler CSS environment variables. Zum Beispiel liefern env(viewport-segment-width) und env(viewport-segment-height) die Abmessungen jedes einzelnen Segments. Dies ermöglicht es Ihnen, leistungsstarke, adaptive Layouts zu erstellen, die sicherstellen, dass Elemente perfekt um das physische Scharnier oder die Lücke herum ausgerichtet sind.
Denken Sie an advanced use cases, die auf Dual-Screens wirklich glänzen. Ein Videoplayer könnte ein Segment belegen, während sein Transkript, Kapitel oder zugehörige Kommentare interaktiv auf dem anderen angezeigt werden. Ähnlich könnte ein E-Mail-Client Ihre Posteingangsliste auf einem Segment und den vollständigen Inhalt der ausgewählten Nachricht gleichzeitig auf dem angrenzenden Segment anzeigen, was die Produktivität steigert.
Chrome unterstützt diese Funktionen bereits, wobei die Viewport Segments API ab Chrome 138 verfügbar ist. Samsung Internet bietet diese Funktionalität seit Jahren auf seinen faltbaren Telefonen an. Während der iPhone Duo-Simulator von Safari, der mit Xcode 27.1 veröffentlicht wurde, diese APIs hinter einem Feature-Flag enthält, können Sie verwandte CSS-Funktionen wie device-posture weiter unter device-posture CSS media feature - MDN Web Docs erkunden.
Gefällt Ihnen der Artikel? Erhalten Sie jeden Morgen einen wie diesen per E-Mail.
eine E-Mail pro Tag · Abmeldung mit zwei Klicks · kein Tracking durch Dritte
Das Browser-Schlachtfeld: Wer ist bereit?
Wir haben das „Warum“ des faltbewussten Designs untersucht; schauen wir uns nun das „Wo“ an. Gute Nachrichten: Viele Tools sind heute bereit! Chrome bietet stabile Unterstützung für die device-posture Media Query und JavaScript API, einschließlich der Viewport Segments API, die ab Chrome 138 verfügbar ist. Das bedeutet, dass ein erheblicher Teil des Android-Marktes für faltbare Geräte Ihre verbesserten Layouts bereits erleben kann. Samsung Internet hat diese Funktionen seit Jahren vorangetrieben und sorgt für ein robustes Erlebnis für seine riesige Flotte faltbarer Geräte.
Safaris Reise hat gerade erst begonnen. Der neue iPhone Duo-Simulator, der mit Xcode 27.1 veröffentlicht wurde, enthält bemerkenswerterweise sowohl die device-posture- als auch die Viewport Segments-APIs. Dies signalisiert Apples klare Absicht, diese Funktionen zu unterstützen. Diese Funktionen befinden sich jedoch derzeit hinter einem feature flag, was bedeutet, dass Apple zwar die Veröffentlichung des 1.999 $ teuren iPhone Duo am 23. Oktober 2026 vorbereitet, die vollständige Unterstützung jedoch möglicherweise nicht zum Start aktiviert ist.
Was soll ein Entwickler also tun? Setzen Sie auf progressive enhancement! Gestalten Sie Ihr Basis-Erlebnis so, dass es auf allen Browsern solide und zugänglich ist, einschließlich derer ohne faltbare APIs wie Firefox. Fügen Sie dann die erweiterten device-posture- und Viewport Segments-Funktionen als Erweiterungen hinzu. Diese Strategie stellt ein überlegenes, maßgeschneidertes Erlebnis für Benutzer auf fähigen faltbaren Geräten sicher – wie einen geteilten Bildschirm für Video und Notizen –, ohne die Funktionalität für andere zu beeinträchtigen. Es geht darum, sich elegant anzupassen, nicht darum, etwas kaputt zu machen.
Häufig gestellte Fragen
Was ist die CSS device-posture Media Query?
Es ist eine neue CSS-Media-Funktion, die es Webseiten ermöglicht, ihr Layout basierend auf dem physischen Zustand eines Geräts anzupassen. Sie hat zwei Hauptwerte: continuous für einen flachen Bildschirm und folded für den Fall, dass der Bildschirm gebogen oder geklappt ist.
Wie steuere ich Inhalte auf beiden Seiten eines gefalteten Bildschirms?
Sie können die Viewport Segments API verwenden. CSS-Umgebungsvariablen wie viewport-segment-width und viewport-segment-height ermöglichen es Ihnen, die unterschiedlichen Bildschirmbereiche auf beiden Seiten der Falte zu gestalten und so Dual-Screen-Erlebnisse zu schaffen.
Welche Browser unterstützen derzeit faltbare CSS-Funktionen?
Chrome und Samsung Internet bieten volle Unterstützung für die device-posture Media Query und die Viewport Segments API. Safari-Unterstützung ist im iPhone Duo Simulator verfügbar, befindet sich derzeit jedoch hinter einem Feature-Flag. Firefox bietet noch keine Unterstützung.
Was ist der Unterschied zwischen der CSS Media Query und der JavaScript API für Foldables?
Die CSS device-posture Media Query ist deklarativ und wird verwendet, um Layouts basierend auf dem Gerätezustand zu gestalten. Die JavaScript Device Posture API ist imperativ und ermöglicht es Ihnen, Code als Reaktion auf Klappereignisse auszuführen, wie zum Beispiel das Pausieren eines Videos oder das Speichern von Daten.