Ein Scharnier kann die Seite verändern, nicht nur die Hardware
Das Scharnier eines Geräts kann eine Webseite verändern, nicht nur die Hardware. Das CSS-Media-Feature device-posture bietet eine leistungsstarke Möglichkeit, Webinhalte anzupassen. Es unterscheidet zwischen einem continuous Bildschirm, wie bei einem flachen Tablet, und einer folded Haltung, wodurch Styles direkt auf den physischen Zustand des Geräts reagieren können.
Ein aktuelles Video von Better Stack demonstrierte dies, indem es eine Seite zeigte, die sich von „flach“ zu „gefaltet“ änderte, als ein hypothetisches Apple Foldable-Gerät gebogen wurde. Obwohl das Video auf ein „2.000-Dollar-Foldable-Phone“ oder ein „iPhone Surface Duo“ verweist, hat Apple ein solches Produkt nicht angekündigt; dies sind spekulative Beispiele zur Veranschaulichung der Technologie.
Diese Funktion, die auch über eine JavaScript API verfügbar ist, dient nicht nur der Show. Das Ziel ist zielgerichtetes Design. Ein Videoplayer könnte beispielsweise im Vollbildmodus angezeigt werden, wenn das Gerät continuous ist, und sich dann automatisch anpassen, um das Video auf einem Segment und Kapiteldetails oder Kommentare auf dem anderen anzuzeigen, wenn es folded ist.
Google Chrome unterstützt diese Funktionen bereits, und Samsung Internet bietet seit Jahren ähnliche Möglichkeiten für Geräte wie das Galaxy Z Fold. Safari hat die APIs in einem „iPhone Surface Duo“-Simulator implementiert, sie befinden sich jedoch noch hinter einem Feature-Flag, was auf eine frühe Entwicklung und nicht auf eine allgemeine Verfügbarkeit hindeutet. Firefox unterstützt diese Funktionen noch nicht.
Lassen Sie JavaScript reagieren, wenn sich das Gerät biegt
So wie sich CSS an den physischen Zustand eines Geräts anpasst, bietet JavaScript ein leistungsstarkes Gegenstück: die Device Posture API. Sie können über navigator.devicePosture auf die aktuelle Haltung zugreifen und, was noch wichtiger ist, mithilfe des change-Events auf Änderungen reagieren. Dieses Event wird ausgelöst, sobald das Gerät zwischen Zuständen wie continuous (flach) und folded wechselt, sodass Ihre Web-App dynamisch reagieren kann.
Stellen Sie sich mehr als nur einen spielerischen Falt-Zähler vor! Mit dieser API können Sie wirklich nützliche Verhaltensweisen implementieren. Ein Videoplayer könnte die Wiedergabe automatisch pausieren, wenn das Gerät gefaltet wird, um versehentliches Überspringen zu verhindern, oder ein Texteditor könnte nicht gespeicherte Änderungen sichern. Bei mehrstufigen Aufgaben könnte ein Faltvorgang einen Übergang zum nächsten Schritt auslösen und so sicherstellen, dass der Kontext des Benutzers erhalten bleibt.
Denken Sie daran: Die Haltung ist ein Signal, keine Anweisung für den Benutzer. Vermeiden Sie es, Benutzer zu überraschen, indem Sie Kernfunktionen drastisch ändern oder Aktionen schwerer erreichbar machen, nur weil das Gerät gebogen wurde. Nutzen Sie diese Signale stattdessen, um die Benutzererfahrung zu verbessern und sicherzustellen, dass primäre Aktionen intuitiv und zugänglich bleiben, unabhängig davon, ob der Bildschirm flach oder gefaltet ist. Google Chrome und Samsung Internet unterstützen diese Funktionen bereits und bieten robuste Tools für den Aufbau anpassungsfähiger Oberflächen.
Verwandeln Sie den Knick in eine Layout-Grenze
Physische Scharniere bei Foldable-Geräten sind nicht nur Hardware-Features; sie können ein einzelnes Display in mehrere Viewport-Segmente unterteilen. Das bedeutet, dass ein gefalteter Bildschirm separate, logische Bereiche freilegen kann, wodurch Entwickler jeder Seite ergänzende Inhalte zuweisen können. Anstatt wichtige Steuerelemente oder Inhalte umständlich direkt über einen Knick hinweg zu platzieren, können Sie separate Bereiche entwerfen.
Denken Sie an einen Videoplayer: Wenn das Gerät flach ist, kann er den gesamten Bildschirm ausfüllen. Wenn es jedoch gefaltet ist, könnten Sie die Videowiedergabe auf einem Segment beibehalten und Kapitel, Beschreibungen oder Kommentare auf dem anderen anzeigen. Dies schafft eine intuitivere und effizientere Benutzererfahrung und nutzt den einzigartigen Formfaktor optimal aus.
CSS bietet segment media features wie horizontal-viewport-segments und vertical-viewport-segments, um diese einzelnen Bereiche zu erkennen und zu gestalten. Sie können Elemente präzise mit Umgebungsvariablen wie env(viewport-segment-width 0 0) oder env(viewport-segment-height 0 0) innerhalb von calc()-Ausdrücken dimensionieren. Dies hilft zu vermeiden, kritische UI-Elemente direkt über dem physischen Scharnier zu platzieren.
Obwohl diese Werkzeuge leistungsstark sind, stellen Sie immer sicher, dass Ihre Layouts auf herkömmlichen, durchgehenden Bildschirmen elegant zurückfallen. Google Google Chrome und Samsung Internet unterstützen diese Funktionen bereits seit Jahren, und auch WebKit macht hinter Flags Fortschritte. Für tiefere technische Details erkunden Sie die Device Posture API - W3C Spezifikation.
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
Entwickeln Sie für heutige Browser, nicht für ein Gerüchte-iPhone
Wo können Sie diese cleveren Foldable-Funktionen also heute tatsächlich nutzen? Google Google Chrome und Samsung Internet sind führend und bieten eine robuste Unterstützung für device-posture und Viewport-Segmente. Samsung Internet leistete vor Jahren Pionierarbeit für seine Galaxy Z Fold- und Flip-Geräte, während Google Google Chrome sie kürzlich von Origin Trials zur Standardunterstützung befördert hat.
Firefox unterstützt diese APIs derzeit leider nicht. Safari und WebKit haben einige experimentelle Arbeiten innerhalb eines speziellen "iPhone Surface Duo"-Simulators gezeigt, aber diese Funktionen bleiben hinter einem Flag verborgen und sind nicht allgemein verfügbar. Überprüfen Sie immer die aktuellen MDN-Referenzen und Browser-Kompatibilitätstabellen, da sich die Unterstützung mit jeder neuen Browserversion schnell weiterentwickelt.
Wenn Sie für Foldables entwickeln, setzen Sie auf Progressive Enhancement. Prüfen Sie zuerst, ob navigator.devicePosture existiert, bevor Sie versuchen, es zu verwenden. Entwerfen Sie zweitens ein nützliches Basis-Layout, das auf allen durchgehenden Bildschirmen gut funktioniert, und fügen Sie dann Foldable-spezifisches Styling hinzu.
Testen Sie Ihre Benutzeroberfläche immer bei Haltungsänderungen. Machen Sie wichtige Inhalte oder Funktionen niemals ausschließlich von einem gefalteten Zustand abhängig; sorgen Sie für ein nahtloses Erlebnis, egal ob das Gerät flach oder gebogen ist. Ihre Benutzer werden Ihnen das durchdachte Design danken.
Häufig gestellte Fragen
Was macht die CSS device-posture Media Query?
Sie ermöglicht es einer Webseite, Stile basierend auf der physischen Haltung eines Geräts anzuwenden, z. B. ob ein faltbarer Bildschirm gefaltet oder durchgehend ist.
Wie helfen Viewport-Segmente bei faltbaren Bildschirmen?
Sie legen die unterschiedlichen Bereiche eines segmentierten Displays offen, sodass eine Seite Inhalte auf jeder Seite eines Scharniers oder einer Falte platzieren kann.
Kann JavaScript erkennen, wenn ein faltbares Telefon die Haltung ändert?
Ja. Die Device Posture API stellt die aktuelle Haltung und ein Änderungsereignis bereit, das es einer Seite ermöglicht, auf Änderungen zu reagieren.
Unterstützen alle Browser Web-APIs für faltbare Geräte?
Nein. Die Unterstützung variiert: Chromium-basierte Browser und Samsung Internet bieten entsprechende Funktionen, während Firefox keine Implementierung besitzt und die Safari-Unterstützung experimentell ist.
Hat Apple ein faltbares iPhone veröffentlicht?
Es wurde kein faltbares iPhone angekündigt. Das Video diskutiert ein hypothetisches Gerät und berichtet über experimentelle Safari-Arbeiten, nicht über ein bestätigtes Apple-Produkt.