Ursprungstest für faltbare APIs

Alexis Menard
Alexis Menard
X GitHub
Thomas Steiner

Chrome testet zwei APIs, die Device Posture API und die Darstellungsbereichssegmente Enumeration API, die als Ursprungstest von Chrome verfügbar sind 125. Diese werden zusammenfassend als faltbare APIs bezeichnet und helfen, Entwickler die App auf faltbare Geräte ausrichten. In diesem Beitrag werden diese APIs vorgestellt. erhalten Sie Informationen dazu, wie Sie mit dem Testen beginnen können.

Es gibt im Wesentlichen zwei verschiedene physische Formfaktoren: Geräte mit einem einzigen flexiblen Bildschirmen (nahtlos) und Geräte mit zwei Bildschirmen (mit nahtlosem Rand, auch als Dual Screen-Geräte).

Schematische Darstellung eines Geräts mit einem einzelnen flexiblen Bildschirm (nahtlos) auf der linken Seite und eines Geräts mit zwei Bildschirmen (mit Nahtstelle, auch als Dual Screen bezeichnet) auf der rechten Seite.

Diese Geräte bieten Entwicklern Herausforderungen und Chancen. Sie bieten zusätzliche Möglichkeiten zur Darstellung von Inhalten. Nutzende können zum Beispiel ein nahtloses Gerät wie ein Buch und nutze es dann wie ein Tablet mit einem Flachbildfernseher. Geräte mit zwei Bildschirmen haben eine physische Verbindung zwischen den Bildschirmen. die berücksichtigt werden müssen.

Mit diesen neuen APIs können Entwickler die Nutzererfahrung verbessern. für diese Geräte. Jede API stellt die benötigten Webplattform-Primitive in zwei über CSS und JavaScript.

Device Posture API

Faltbare Geräte bieten Funktionen, mit denen sie ihre_ Haltung_ oder des physischen Zustands des Geräts. Sie können ihren Formfaktor ändern, Content-Autoren eine andere User Experience zu bieten. Diese neuen APIs damit Webinhalte auf die verschiedenen Faltzustände reagieren können.

Es gibt zwei Gerätestatus:

  • folded: Laptop- oder Buchhaltung.

Schematische Darstellung von Geräten in flacher Haltung oder Tablethaltung mit nahtlos gebogenem Display

  • continuous: Flache Displays, Tablets oder sogar nahtlos gebogene Displays

Schematische Darstellung von Geräten in Laptop- oder Buchhaltung.

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 Postures bestehen aus vordefinierter Werte, die jeweils den physikalischen Zustand des .

Die Werte der Funktion device-posture entsprechen der vorherigen Beschreibung von mögliche Postures:

  • folded
  • continuous

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}.`);

Um auf Änderungen am Gerätestatus zu reagieren, z. B. wenn ein Nutzer ein Gerät vollständig öffnet oder Wenn Sie also von folded zu continuous wechseln, abonnieren Sie change-Ereignisse.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

Viewport Segments API

Die Darstellungsbereich-Segmente sind CSS-Umgebungsvariablen, die die Position und Dimensionen eines logisch separaten Bereichs des Darstellungsbereichs definieren. Darstellungsbereich-Segmente die erstellt werden, wenn der Darstellungsbereich durch ein oder mehrere Hardwareelemente (z. B. ein Falt- oder Scharnier zwischen separaten Displays), die als Trennelement dienen. Segmente sind die Regionen des Darstellungsbereichs, die vom Autor.

CSS

Die Anzahl der logischen Unterteilungen wird in zwei neuen Medienfunktionen angezeigt: definiert in der Spezifikation für CSS-Medienabfragen der Ebene 5: vertical-viewport-segments und horizontal-viewport-segments. Sie beschließen, Anzahl der Segmente, in die der Darstellungsbereich unterteilt wird.

Außerdem wurden neue Umgebungsvariablen hinzugefügt, um die Dimensionen jeder logischen Division entspricht. 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 darstellen. in dem zweidimensionalen Raster, das durch die Hardwarefunktionen die die Trennung der Segmente.

<ph type="x-smartling-placeholder">
</ph> Diagramm mit horizontalen und vertikalen Segmenten. Das erste horizontale Segment ist x 0 und y 0, das zweite x 1 und y 0. Das erste vertikale Segment ist x 0 und y 0, das zweite x 0 und y 1. <ph type="x-smartling-placeholder">
</ph> Das erste horizontale Segment ist x 0 und y 0, das zweite x 1 und y. 0. Das erste vertikale Segment ist x 0 und y 0, das zweite x 0 und y 1.

Das folgende Code-Snippet ist ein vereinfachtes Beispiel für die Erstellung einer geteilten UX, in der haben wir zwei Inhaltsabschnitte (col1 und col2) auf jeder Seite des Seitenumbruchs.

<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.

Faltbares Smartphone in vertikaler Buchhaltung.

Faltbares Smartphone in horizontaler Buchhaltung.

Faltbares Tablet in horizontaler Buchhaltung.

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 segments-Array repräsentiert jedes logische Segment des Darstellungsbereich mit einem DOMArray, der die Koordinaten und Größe angibt. Das segments Feld ist bei der Abfrage ein Snapshot des gegebenen Status, um aktualisierte Werte, die Sie zum Überwachen von Statusänderungen oder Größenänderungen benötigen, und segments-Property.

Faltbare APIs testen

Die faltbaren APIs sind in einer Ursprungstest von Chrome 125 bis Chrome 128. Weitere Informationen finden Sie unter Erste Schritte mit Ursprungstests finden Sie Hintergrundinformationen zu Ursprungstests.

Für lokale Tests können die faltbaren APIs mit der Funktion „Experimental Web“ aktiviert werden. Flag der Plattformfunktionen unter chrome://flags/#enable-experimental-web-platform-features Es kann auch sein, indem Sie Chrome über die Befehlszeile mit --enable-experimental-web-platform-features

Demos

Demos finden Sie in den Demos . Wenn Sie kein physisches Gerät testen möchten, können Sie das Galaxy Z Fold 5 oder Asus Zenbook Fold emuliert, kann in den Chrome-Entwicklertools zwischen Kontinuierlich und Zugeklappt: Sie können sich das Scharnier auch zutreffend sind.

Chrome-Entwicklertools, die ein faltbares Gerät emulieren