Chrome testet derzeit 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, mit denen Entwickler ihre Anzeigen auf faltbare Geräte ausrichten können. In diesem Beitrag werden diese APIs vorgestellt. Außerdem erfahren Sie, wie Sie mit dem Testen beginnen können.
Es gibt hauptsächlich zwei verschiedene Formfaktoren: Geräte mit einem einzigen flexiblen Bildschirm (nahtlos) und Geräte mit zwei Bildschirmen (mit Naht, auch Geräte mit Dual Screen).
Diese Geräte stellen für Entwickler Herausforderungen und Chancen dar. Sie bieten zusätzliche Möglichkeiten, wie Inhalte angesehen werden können. Zum Beispiel könnte ein Nutzer ein nahtloses Gerät wie ein Buch in der Hand halten und es dann wie ein Tablet mit einem Flachbildfernseher verwenden. Geräte mit zwei Bildschirmen haben eine physische Verbindung zwischen den Bildschirmen, die möglicherweise berücksichtigt werden müssen.
Diese neuen APIs bieten Entwicklern die Möglichkeit, die Nutzererfahrung auf diesen Geräten zu verbessern. Jede API stellt die erforderlichen Grundelemente der Webplattform auf zwei Arten bereit: über CSS und JavaScript.
Device Posture API
Faltbare Geräte haben Funktionen, mit denen sie ihre_Ausrichtung_ oder den physischen Zustand des Geräts ändern können. Sie können ihren Formfaktor ändern, um Content-Autoren eine andere User Experience zu bieten. Diese neuen APIs sorgen dafür, dass Webinhalte auf die verschiedenen Faltungszustände reagieren können.
Es gibt zwei Gerätestatus, in denen sich ein Gerät befinden kann:
folded: Einstellungen für Laptops oder Bücher.
continuous: Flache, Tablet- oder sogar nahtlos gebogene Displays.
CSS
In der Device Posture API-Spezifikation wird ein neues CSS-Medienfeature definiert: device-posture. Diese Medienfunktion wird zu einer Reihe von festen Haltungen aufgelöst. Diese Einstellungen bestehen aus einer Reihe vordefinierter Werte, die jeweils einen physischen Zustand des Geräts umfassen.
Die Werte des Features device-posture stimmen mit der vorherigen Beschreibung möglicher Sicherheitsmaßnahmen überein:
foldedcontinuous
Wenn neue Geräte auf den Markt kommen, könnte das zu einem späteren Zeitpunkt passen.
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 Gerätestatus ist ein neues DevicePosture-Objekt verfügbar.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Wenn du auf Änderungen des Gerätestatus reagieren möchtest, z. B. wenn ein Nutzer das Gerät vollständig öffnet und so von folded zu continuous wechselt, musst du change-Ereignisse abonnieren.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
API für Segmente im Darstellungsbereich
Die Segmente des Darstellungsbereichs sind CSS-Umgebungsvariablen, mit denen die Position und die Abmessungen einer logisch getrennten Region des Darstellungsbereichs definiert werden. Segmente im Darstellungsbereich werden erstellt, wenn der Darstellungsbereich durch mindestens ein Hardwareelement (z. B. eine Falte oder ein Scharnier zwischen separaten Displays) aufgeteilt 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 Spezifikation für CSS-Medienabfragen der Ebene 5 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 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 die x- und y-Position in dem zweidimensionalen Raster darstellen, das durch die Hardwareelemente erstellt wird, die die Segmente voneinander trennen.
Das folgende Code-Snippet ist ein vereinfachtes Beispiel für das Erstellen einer geteilten UX, bei dem auf jeder Seite des „Fold“ 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 der Vorgang auf einem physischen Gerät aussieht.
JavaScript
Die Anzahl der Segmente des Darstellungsbereichs erhalten Sie, indem Sie den Eintrag segments im visualViewport prüfen.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Jeder Eintrag im segments-Array stellt jedes logische Segment des Darstellungsbereichs mit einem DOMArray dar, der die Koordinaten und die Größe beschreibt. Das Feld segments ist bei der Abfrage ein Snapshot des angegebenen Status. Um aktualisierte Werte zu erhalten, müssen Sie auf Änderungen des Sicherheitsstatus warten oder die Größe von Ereignissen beobachten und das Attribut segments noch einmal abfragen.
Faltbare APIs testen
Die faltbaren APIs sind im Rahmen eines Ursprungstests 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 Funktions-Flag der experimentellen Webplattform 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 Demos-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 und Folded wechseln. Bei Bedarf können Sie auch das Scharnier visualisieren.
