In Chrome werden derzeit zwei APIs getestet: die Device Posture API und die Viewport Segments Enumeration API. Sie sind ab Chrome 125 als Ursprungstest verfügbar. Diese werden zusammen als Foldable APIs bezeichnet und sollen Entwicklern dabei helfen, ihre Apps auf faltbare Geräte auszurichten. In diesem Beitrag werden diese APIs vorgestellt und Sie erfahren, wie Sie mit dem Testen beginnen.
Es gibt hauptsächlich zwei verschiedene physische Formfaktoren: Geräte mit einem einzigen 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 Chancen. Sie bieten zusätzliche Möglichkeiten, Inhalte anzusehen. Ein Nutzer kann beispielsweise ein nahtloses Gerät wie ein Buch halten und es dann wie ein Tablet mit einem flachen Bildschirm verwenden. 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 für diese Geräte verbessern. Jede API stellt die erforderlichen Webplattform-Primitiven auf zwei Arten bereit: über CSS und JavaScript.
Device Posture API
Faltbare Geräte haben Funktionen, mit denen sich ihre _Position_ oder der physische Zustand des Geräts ändern lässt. Sie können ihren Formfaktor ändern, sodass die Inhaltsautoren eine andere Nutzererfahrung bieten können. Mit diesen neuen APIs können Webinhalte auf die verschiedenen Faltzustände reagieren.
Es gibt zwei Gerätepositionen:
folded: Laptop- oder Buchhaltungen.
continuous: Flache, Tablet- oder sogar nahtlos gewölbte Displays.
CSS
Die Device Posture API-Spezifikation definiert eine neue CSS-Medienfunktion: device-posture. Diese Medienfunktion wird in eine Reihe fester Körperhaltungen aufgelöst. Diese Haltungen bestehen aus einer Reihe von vordefinierten Werten, die jeweils einen physischen Zustand des Geräts umfassen.
Die Werte des device-posture-Attributs stimmen mit der vorherigen Beschreibung der möglichen Körperhaltungen überein:
foldedcontinuous
Wenn neue Geräte auf den Markt kommen, können in Zukunft weitere Körperhaltungen 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
Für die Abfrage der Ausrichtung 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 sich daher von folded zu continuous bewegt, 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 die Abmessungen einer logisch getrennten Region des Darstellungsbereichs definieren. Viewport-Segmente werden erstellt, wenn der Viewport durch eine oder mehrere Hardwarefunktionen (z. B. ein Scharnier zwischen separaten Displays) geteilt wird, die als Trennlinie dienen. Segmente sind die Bereiche des Darstellungsbereichs, die vom Autor als logisch voneinander getrennt behandelt werden können.
CSS
Die Anzahl der logischen Unterteilungen wird über zwei neue Medienfunktionen angegeben, 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, um die Dimensionen der einzelnen logischen Abteilungen abzufragen. 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- und y-Position im zweidimensionalen Raster darstellen, das durch die Hardwarefunktionen erstellt wird, die die Segmente voneinander trennen.
Das folgende Code-Snippet ist ein vereinfachtes Beispiel für die Erstellung einer geteilten UX, bei der auf jeder Seite des Folds zwei Inhaltsbereiche (col1 und col2) vorhanden sind.
<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 Ansichtssegmente finden Sie im Feld segments unter visualViewport.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Jeder Eintrag im segments-Array steht für ein logisches Segment des Darstellungsbereichs mit einer DOMArray, die die Koordinaten und die Größe beschreibt. Das Feld segments ist ein Snapshot des angegebenen Status bei der Abfrage. Wenn Sie aktualisierte Werte erhalten möchten, müssen Sie auf Änderungen der Haltung oder Größenänderungsereignisse achten und die Property segments noch einmal abfragen.
Foldable APIs testen
Die Foldable APIs sind in einem Ursprungstest von Chrome 125 bis Chrome 128 verfügbar. Unter Erste Schritte mit Ursprungstests finden Sie Hintergrundinformationen zu Ursprungstests.
Für lokale Tests können die Foldable APIs mit der Flag für experimentelle Webplattform-Funktionen 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 Repository für Demos. 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 (Kontinuierlich) und Folded (Zugeklappt) wechseln. Sie können auch das Scharnier visualisieren, falls zutreffend.
Weitere Informationen
- Device Posture API
- Viewport Segments API