In Chrome werden zwei APIs getestet: die Device Posture API und die Viewport Segments Enumeration API. Sie sind ab Chrome 125 als Ursprungstest verfügbar. Diese werden zusammenfassend als Foldable APIs bezeichnet und sollen Entwicklern helfen, faltbare Geräte als Zielgruppe zu erreichen. In diesem Beitrag werden diese APIs vorgestellt und es wird beschrieben, wie Sie mit dem Testen beginnen können.
Es gibt hauptsächlich zwei verschiedene physische Formfaktoren: Geräte mit einem einzelnen flexiblen Display (nahtlos) und Geräte mit zwei Displays (mit Naht, auch als Dual-Screen-Geräte bezeichnet).
Diese Geräte stellen Entwickler vor Herausforderungen und bieten ihnen gleichzeitig neue Möglichkeiten. Sie bieten zusätzliche Möglichkeiten, Inhalte anzusehen. Ein Nutzer hält ein nahtloses Gerät beispielsweise wie ein Buch und verwendet es dann wie ein Tablet mit einem flachen Bildschirm. Geräte mit zwei Bildschirmen haben eine physische Verbindung zwischen den Bildschirmen, die berücksichtigt werden muss.
Mit diesen neuen APIs können Entwickler die Nutzerfreundlichkeit auf diesen Geräten verbessern. Jede API stellt die erforderlichen Webplattform-Grundelemente auf zwei Arten zur Verfügung: über CSS und JavaScript.
Device Posture API
Faltbare Geräte haben Funktionen, mit denen sie ihre _Haltung_ oder den physischen Zustand des Geräts ändern können. Sie können ihren Formfaktor ändern, sodass Autoren von Inhalten eine andere Nutzererfahrung bieten können. Mit diesen neuen APIs kann Webcontent auf die verschiedenen Faltzustände reagieren.
Es gibt zwei Gerätepositionen:
folded: Laptop- oder Buchpositionen.
continuous: Flache, Tablet- oder sogar nahtlos gekrümmte Displays.
CSS
In der Device Posture API-Spezifikation wird eine neue CSS-Media-Funktion definiert: device-posture. Diese Media-Funktion wird zu einer Reihe von festen Posen aufgelöst. Diese Positionen bestehen aus einer Reihe vordefinierter Werte, die jeweils einen physischen Zustand des Geräts umfassen.
Die Werte des Merkmals device-posture entsprechen der vorherigen Beschreibung der möglichen Körperhaltungen:
foldedcontinuous
Wenn neue Geräte auf den Markt kommen, können in Zukunft neue Körperhaltungsarten hinzugefügt werden.
Beispiele:
/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }
/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }
JavaScript
Zum Abfragen der Position eines Geräts ist ein neues DevicePosture-Objekt verfügbar.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Wenn Sie auf Änderungen der Geräteposition reagieren möchten, z. B. wenn ein Nutzer ein Gerät vollständig öffnet und es daher von folded zu continuous wechselt, abonnieren Sie change-Ereignisse.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
Viewport Segments API
Die Darstellungsbereichssegmente sind CSS-Umgebungsvariablen, die die Position und Abmessungen eines logisch separaten Bereichs des Darstellungsbereichs definieren. Viewport-Segmente werden erstellt, wenn der Viewport durch ein oder mehrere Hardwarefunktionen (z. B. eine Faltung oder ein Scharnier zwischen separaten Displays) unterteilt wird, die als Trennlinie fungieren. Segmente sind die Bereiche des Darstellungsbereichs, die vom Autor als logisch getrennt behandelt werden können.
CSS
Die Anzahl der logischen Unterteilungen wird über zwei neue Media-Funktionen verfügbar gemacht, die in der CSS Media Queries Level 5-Spezifikation definiert sind: vertical-viewport-segments und horizontal-viewport-segments. Sie entsprechen der Anzahl der Segmente, in die der Darstellungsbereich unterteilt ist.
Außerdem wurden neue Umgebungsvariablen hinzugefügt, mit denen die Dimensionen der einzelnen logischen Unterteilungen abgefragt werden können. Das sind:
env(viewport-segment-width x y)env(viewport-segment-height x y)env(viewport-segment-top x y)env(viewport-segment-left x y)env(viewport-segment-bottom x y)env(viewport-segment-right x y)
Jede Variable hat zwei Dimensionen, die die x- bzw. y-Position im zweidimensionalen Raster darstellen, das durch die Hardwarefunktionen erstellt wird, die die Segmente trennen.
Das folgende Code-Snippet ist ein vereinfachtes Beispiel für die Erstellung einer geteilten Benutzeroberfläche mit zwei Inhaltsbereichen (col1 und col2) auf jeder Seite des Falzes.
<style>
/* Segments are laid out horizontally. */
@media (horizontal-viewport-segments: 2) {
#segment-css-container {
flex-direction: row;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-right 0 0);
background-color: steelblue;
}
#fold {
width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
background-color: black;
height: 100%;
}
#col2 {
display: flex;
background-color: green;
}
}
/* Segments are laid out vertically. */
@media (vertical-viewport-segments: 2) {
#segment-css-container {
flex-direction: column;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-bottom 0 0);
background-color: pink;
}
#fold {
width: 100%;
height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
background-color: black;
}
#col2 {
display: flex;
background-color: seagreen;
}
}
</style>
<div id="segment-css-container">
<div id="col1"></div>
<div id="fold"></div>
<div id="col2"></div>
</div>
Die folgenden Fotos zeigen, wie die Funktion auf einem physischen Gerät aussieht.
JavaScript
Die Anzahl der Viewport-Segmente finden Sie im Eintrag segments in der visualViewport.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Jeder Eintrag im segments-Array steht für jedes logische Segment des Darstellungsbereichs mit einem DOMArray, das die Koordinaten und die Größe beschreibt. Das Feld segments ist ein Snapshot des abgefragten Status. Wenn Sie aktualisierte Werte erhalten möchten, müssen Sie auf Änderungen der Geräteausrichtung oder auf Ereignisse zum Ändern der Größe warten und die Property segments noch einmal abfragen.
Foldable APIs ausprobieren
Die Foldable APIs sind in einem Ursprungstest von Chrome 125 bis Chrome 128 verfügbar. Erste Schritte mit Ursprungstests
Für lokale Tests können die Foldable APIs mit dem Flag „Experimental Web Platform features“ unter chrome://flags/#enable-experimental-web-platform-features aktiviert werden. Sie können die Funktion auch aktivieren, indem Sie Chrome über die Befehlszeile mit --enable-experimental-web-platform-features ausführen.
Demos
Demos finden Sie im Demos-Repository. Wenn Sie kein physisches Gerät zum Testen haben, können Sie in den Chrome DevTools das emulierte Gerät Galaxy Z Fold 5 oder Asus Zenbook Fold auswählen und zwischen Continuous und Folded wechseln. Bei Bedarf können Sie auch das Scharnier visualisieren.
Weitere Informationen
- Device Posture API
- Viewport Segments API