Warum Foldables das Web grundlegend verändern werden

Ganz ehrlich – faltbare Smartphones schleichen schon seit einigen Jahren am Rand der Tech-Welt herum. Android-Nutzer genossen bereits das Foldable-Leben, während der Rest von uns zuschaute und gelegentlich neidisch auf die eleganten Geräte-Demos starrte. Jetzt hat Apple den Sprung gewagt, und unabhängig davon, ob man eher Team iPhone oder Team Android ist: Diese Entwicklung hat gewaltige Auswirkungen auf die Webentwicklung.

Ich habe den Markt eine Weile beobachtet – und vielleicht etwas zu viel Zeit mit dem iPhone Duo Simulator verbracht – und kann bestätigen: Die Web-APIs für diese Geräte sind erstaunlich ausgereift. Apple hat sechs Videos zur Duo-Entwicklung veröffentlicht. Zwar richtet sich vieles an native iOS-Entwickler, aber für Webentwickler steht die Tür weit offen mit einigen wirklich spannenden Schnittstellen.

Also schauen wir uns an, was du jetzt schon nutzen kannst.

Die Device Posture API: Den Fold-Status kennen

Den Anfang macht die Device Posture API. Dieses praktische kleine Interface verrät dir, ob der Nutzer auf einen flachen Bildschirm schaut, ein gefaltetes Display nutzt oder irgendetwas dazwischen. Stell es dir wie eine Statusmeldung deines Geräts vor – eine Info über seinen physischen Zustand.

In JavaScript greifst du über navigator.devicePosture darauf zu. Das Interface meldet entweder continuous für ein flaches Display oder folded für einen teilweise geschlossenen Zustand, ähnlich einem Laptop. In CSS wird es sogar noch eleganter mit dem device-posture Media Query:

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

Das ist ein gewaltiger Vorteil für Mediaplayer, Dokumentenansichten oder jede App, die von einem Zwei-Bildschirm-Setup profitieren könnte. Stell dir vor, dein Videoplayer verschiebt automatisch die Steuerung auf den unteren Bildschirm, sobald das Gerät gefaltet wird – ja, das funktioniert tatsächlich.

Die Viewport Segments API: Segmentierung beherrschen

Wenn die Device Posture API den Zustand des Geräts beschreibt, liefert die Viewport Segments API Informationen über seine Anatomie. Sobald ein faltbares Telefon teilweise geschlossen ist, entstehen unterschiedliche Bildschirmbereiche. Diese API ermöglicht dir, diese Segmente programmatisch abzufragen.

In JavaScript gibt window.visualViewport.segments ein Array aus DOMRects zurück, das Größe, Form und Position jedes Segments beschreibt. In CSS hast du sogar noch mehr Möglichkeiten:

/* Layouts basierend auf der Anzahl der Segmente anpassen */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

Die CSS-Umgebungsvariablen sind besonders elegant. Mit env(viewport-segment-width 1 0) erhältst du die Breite des Segments mit horizontalem Index 1 und vertikalem Index 0. Es dauert einen Moment, bis man das Koordinatensystem verinnerlicht hat, aber dann eröffnen sich unzählige Möglichkeiten.

Warum das für deine Projekte relevant ist

Die Sache ist die – faltbare Smartphones sind kein Nischenprodukt mehr. Sie werden zum Mainstream, und die Web-APIs sind bereits vorhanden, um sie zu unterstützen. Bei NameOcean sprechen wir oft davon, für die Zukunft zu bauen, und das ist ein perfektes Beispiel dafür, warum das wichtig ist.

Für Startups und Entwickler eröffnen sich komplett neue Interaktionsmuster. Eine Reise-App könnte eine Karte auf einem Bildschirm und Buchungsdetails auf dem anderen anzeigen. Ein Online-Shop könnte Produktbilder auf einem Segment und Bewertungen auf dem anderen darstellen. Ein Code-Editor könnte mobilen Entwicklern endlich ein echtes Split-View-Erlebnis bieten – ganz ohne native App.

Die Faltkante ist keine Einschränkung – sie ist eine Chance. Mit diesen APIs kannst du Erlebnisse schaffen, die sich nativ auf faltbarer Hardware anfühlen, während sie trotzdem für jeden auf dem normalen Web zugänglich bleiben.

Der Einstieg

Das Beste daran? Du musst nicht losrennen und ein faltbares Smartphone kaufen, um zu experimentieren. Sowohl der Safari Technology Preview als auch die Chrome DevTools bieten Simulator-Unterstützung zum Testen dieser APIs. Starte ein virtuelles Gerät, wechsle zwischen flachem und gefaltetem Zustand und beobachte, wie sich deine Layouts in Echtzeit anpassen.

Wenn du eine Business-Website oder Web-App betreibst, ist jetzt der Zeitpunkt gekommen, deine Responsive-Design-Strategie zu überprüfen. Die Frage ist nicht, ob faltbare Smartphones wichtig werden – sondern ob du bereit bist, wenn deine Nutzer plötzlich damit auftauchen.

Die Webplattform entwickelt sich auf faszinierende Weise weiter, und APIs wie diese zeigen, dass sie schnell sein kann, wenn Hardware neue Interaktionen inspiriert. Jetzt bist du dran – falt dich.