Prova dell'origine per le API pieghevoli

Alexis Menard

Thomas Steiner

Chrome sta sperimentando due API: l'API Device Posture e i segmenti Viewport API Enumeration, disponibili come prova dell'origine di Chrome 125. note collettivamente come API pieghevoli, progettate per aiutare gli sviluppatori scelgono come target i dispositivi pieghevoli. Questo post presenta queste API e fornisce informazioni su come iniziare a testarle.

Nota: queste API sono state sviluppate negli ultimi anni in collaborazione con Microsoft, Intel, Samsung e Google.

Esistono principalmente due diversi fattori di forma fisica: i dispositivi con un schermo flessibile (senza cuciture) e dispositivi con due schermi (con cucitura, noto anche come dispositivi Dual Screen).

Questi dispositivi presentano sfide e opportunità agli sviluppatori. Forniscono altri modi in cui possono essere visualizzati i contenuti. Ad esempio, un utente potrebbe avere un un dispositivo semplice come un libro, per poi passare all'utilizzo come un tablet con schermo piatto. I dispositivi con due schermi sono collegati fisicamente tra loro che potrebbe essere necessario considerare.

Queste nuove API consentono agli sviluppatori di offrire esperienze utente migliori per questi dispositivi. Ogni API espone le primitive della piattaforma web necessarie in due tramite CSS e JavaScript.

API Device Posture

I dispositivi pieghevoli hanno funzionalità che consentono di cambiarne la postura. lo stato fisico del dispositivo. Possono cambiare il fattore di forma consentendo gli autori di contenuti di fornire una diversa esperienza utente, e queste nuove API i contenuti web possono reagire ai vari stati di chiusura.

Un dispositivo può trovarsi in due posizioni:

• folded: posture del laptop o dei libri.

• continuous: display piatti, tablet o persino curvi.

CSS

La specifica dell'API Device Posture definisce un nuovo CSS media-feature: device-posture. Questa funzionalità multimediale si risolve in un insieme di posture fisse. Queste posture consistono di una serie di valori predefiniti, ognuno dei quali comprende uno stato fisico dispositivo.

I valori della caratteristica device-posture corrispondono alla descrizione precedente della possibili posizioni:

• folded
• continuous

Se sul mercato verranno commercializzati nuovi dispositivi, potrebbero essere aggiunte nuove posture.

Esempi:

/* 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

Per eseguire query sulla postura di un dispositivo, è disponibile un nuovo oggetto DevicePosture.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

Per reagire ai cambiamenti della postura del dispositivo, ad esempio quando l'utente apre completamente il dispositivo. pertanto passa da folded a continuous, iscriviti agli eventi change.

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

API Viewport Segment

I segmenti dell'area visibile sono variabili di ambiente CSS che definiscono la posizione dimensioni di una regione logicamente separata dell'area visibile. I segmenti dell'area visibile sono viene creata quando l'area visibile viene suddivisa per una o più funzionalità hardware (ad esempio o una cerniera tra espositori separati) che fungono da divisore. I segmenti sono le regioni dell'area visibile che possono essere trattate come logicamente distinte e l'autore.

CSS

Il numero di divisioni logiche è esposto attraverso due nuove caratteristiche multimediali: definiti nella specifica CSS Media Query Level 5: vertical-viewport-segments e horizontal-viewport-segments. Risolve in il numero di segmenti in cui è suddivisa l'area visibile.

Inoltre, sono state aggiunte nuove variabili di ambiente per eseguire query sulle dimensioni ciascuna divisione logica. Queste variabili sono:

• 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)

Ogni variabile ha due dimensioni, che rappresentano la posizione x e y, rispettivamente, nella griglia bidimensionale creata dalle caratteristiche hardware separando i segmenti.

. Il primo segmento orizzontale è x 0 e y 0, il secondo x 1 e y 0. Il primo segmento verticale è x 0 e y 0, il secondo x 0 e y 1.

Il seguente snippet di codice è un esempio semplificato di creazione di un'esperienza utente divisa in cui abbiamo due sezioni di contenuti (col1 e col2) su ciascun lato della piega.

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

Le seguenti foto mostrano l'esperienza su un dispositivo fisico.

JavaScript

Per ottenere il numero di segmenti dell'area visibile, controlla la voce segments nella visualViewport.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

Nota: durante la prova dell'origine, window.visualViewport.segments funzionerà. Deve ancora essere determinata la forma finale dell'API, come da discussione del gruppo di lavoro CSS.

Ogni voce nell'array segments rappresenta ciascun segmento logico della area visibile con un DOMArray che descrive le coordinate e le dimensioni. segments è uno snapshot dello stato specificato quando viene eseguita una query, in modo da ricevere informazioni valori necessari per ascoltare le modifiche alla postura o ridimensionare gli eventi ed eseguire nuovamente query segments proprietà.

Prova le API pieghevoli

Le API Foldable sono disponibili in prova dell'origine da Chrome 125 a Chrome 128. Consulta Iniziare a utilizzare le prove dell'origine per informazioni di base sulle prove dell'origine.

Per i test locali, le API pieghevoli possono essere abilitate con l'ambiente web sperimentale Flag funzionalità della piattaforma chrome://flags/#enable-experimental-web-platform-features. Può anche essere possono essere attivati eseguendo Chrome dalla riga di comando --enable-experimental-web-platform-features.

Demo

Per le demo, guarda i demo un repository attendibile. Se non disponi di un dispositivo fisico con cui eseguire il test, puoi scegliere Galaxy Z Fold 5 o Asus Dispositivo emulato Zenbook Fold in Chrome DevTools e passa da uno all'altro Continuo e Piegato. Puoi anche visualizzare la cerniera quando applicabile.

Link correlati

• API Device Posture
  .
  • Posizione di Mozilla
  • Posizione WebKit
  • Voce dello stato di Chrome
  • Specifica W3C
• API ViewportSegments
  .
  • Posizione di Mozilla
  • Posizione WebKit
  • Voce dello stato di Chrome
  • Specifica delle query sui media CSS di W3C e Specifica delle variabili di ambiente CSS W3C