Chrome testet zwei APIs, die Device Posture API und die Viewport Segments Enumeration API, die als Ursprungstest von Chrome 125 verfügbar sind. Diese werden zusammen als faltbare APIs bezeichnet und sollen Entwicklern die Ausrichtung auf faltbare Geräte erleichtern. In diesem Beitrag werden diese APIs vorgestellt und Sie erfahren, wie Sie sie testen können.
Es gibt hauptsächlich zwei verschiedene physische Formfaktoren: Geräte mit einem einzigen flexiblen Bildschirm (nahtlos) und Geräte mit zwei Bildschirmen (mit Naht, auch als Dual Screen-Geräte bezeichnet).
Diese Geräte bieten Entwicklern Herausforderungen und Chancen. Sie bieten zusätzliche Möglichkeiten zur Anzeige von Inhalten. Zum Beispiel könnte ein Nutzer ein nahtloses Gerät wie ein Buch halten und dann zu einem Tablet mit einem flachen Bildschirm wechseln. Geräte mit zwei Bildschirmen haben eine physische Verbindung zwischen den Bildschirmen, die möglicherweise berücksichtigt werden muss.
Diese neuen APIs bieten Entwicklern die Möglichkeit, die Nutzererfahrung auf diesen Geräten zu verbessern. Jede API stellt die erforderlichen Webplattform-Primitive auf zwei Arten zur Verfügung: über CSS und JavaScript.
Device Posture API
Faltbare Geräte haben Funktionen, mit denen sie ihre Position oder den physischen Zustand des Geräts ändern können. Sie können ihren Formfaktor ändern, um Content-Autoren eine andere Nutzererfahrung zu bieten, und diese neuen APIs sorgen dafür, dass Webinhalte auf die verschiedenen Falt-Zustände reagieren können.
Es gibt zwei Gerätestatus:
folded: Laptop- oder Buchhaltung.
continuous: Flache Displays, Tablets oder sogar nahtlos gebogene Displays
CSS
Die Device Posture API-Spezifikation definiert ein neues CSS-media-feature: device-posture. Diese Medienfunktion löst eine Reihe von festgelegten Sicherheitsstatus aus. Diese Sicherheitsstatus bestehen aus einer Reihe vordefinierter Werte, die jeweils einen physischen Zustand des Geräts umfassen.
Die Werte des Features device-posture entsprechen der vorherigen Beschreibung möglicher Sicherheitsstatus:
foldedcontinuous
Wenn in Zukunft neue Geräte auf den Markt kommen, könnten neue Sicherheitsmaßnahmen eingeführt 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 des Status eines Geräts ist ein neues DevicePosture-Objekt verfügbar.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Abonnieren Sie change-Ereignisse, um auf Änderungen am Gerätestatus zu reagieren, z. B. wenn ein Nutzer ein Gerät vollständig öffnet und daher von folded zu continuous wechselt.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
Viewport Segments API
Die Darstellungsbereichsegmente sind CSS-Umgebungsvariablen, die die Position und Abmessungen eines logisch separaten Bereichs des Darstellungsbereichs definieren. Darstellungsbereichsegmente werden erstellt, wenn der Darstellungsbereich durch ein oder mehrere Hardwareelemente (z. B. eine Faltung oder ein Scharnier zwischen separaten Displays) geteilt wird, die als Trennlinie dienen. Segmente sind die Regionen des Darstellungsbereichs, die vom Autor als logisch unterschiedlich behandelt werden können.
CSS
Die Anzahl der logischen Unterteilungen wird über zwei neue Medienfunktionen bereitgestellt, die in der CSS-Spezifikation für Medienabfragen mit Ebene 5 definiert sind: vertical-viewport-segments und horizontal-viewport-segments. Sie werden in die Anzahl der Segmente aufgelöst, in die der Darstellungsbereich unterteilt ist.
Außerdem wurden neue Umgebungsvariablen hinzugefügt, um die Dimensionen jeder logischen Division abzufragen. Diese Variablen 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 jeweils die x- bzw. y-Position in dem 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 UX, bei der auf jeder Seite des Seitenumbruchs zwei Inhaltsabschnitte („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 Nutzung auf einem physischen Gerät aussieht.
JavaScript
Die Anzahl der Segmente im Darstellungsbereich finden Sie im Eintrag segments im visualViewport.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Jeder Eintrag im Array segments repräsentiert jedes logische Segment des Darstellungsbereichs mit einem DOMArray, der die Koordinaten und die Größe angibt. Das Feld segments ist bei der Abfrage ein Snapshot des angegebenen Status. Um aktualisierte Werte zu erhalten, müssen Sie auf Statusänderungen warten oder Ereignisse in Bezug auf die Größenänderung beobachten und das Attribut segments neu abfragen.
Faltbare APIs testen
Die faltbaren APIs sind in einem Ursprungstest von Chrome 125 bis Chrome 128 verfügbar. Hintergrundinformationen zu Ursprungstests finden Sie unter Erste Schritte mit Ursprungstests.
Für lokale Tests können die faltbaren APIs mit dem Flag der experimentellen Webplattform-Funktionen unter chrome://flags/#enable-experimental-web-platform-features aktiviert werden. Sie kann auch aktiviert werden, indem Sie Chrome mit --enable-experimental-web-platform-features über die Befehlszeile ausführen.
Demos
Demos finden Sie im Demo-Repository. Wenn Sie kein physisches Gerät zum Testen haben, können Sie in den Chrome-Entwicklertools das emulierte Gerät Galaxy Z Fold 5 oder Asus Zenbook Fold auswählen und zwischen Continuous (Kontinuierlich) und Folded (Zugeklappt) wechseln. Gegebenenfalls können Sie sich das Scharnier auch hier ansehen.
Weitere Informationen
- Device Posture API
- Viewport Segments API