Prova dell'origine per le API pieghevoli

Chrome sta testando due API, l'API Device Posture e l'API Viewport Segments enumeration, che sono disponibili come prova dell'origine da Chrome 125. Sono conosciute collettivamente come API per i dispositivi pieghevoli e sono progettate per aiutare gli sviluppatori a scegliere come target i dispositivi pieghevoli. Questo post introduce queste API e fornisce informazioni su come iniziare a testarle.

Esistono principalmente due diversi fattori di forma fisici: dispositivi con un singolo schermo flessibile (senza soluzione di continuità) e dispositivi con due schermi (con soluzione di continuità, noti anche come dispositivi dual screen).

Disegno schematico di un dispositivo con un singolo schermo flessibile (senza cuciture) a sinistra e un dispositivo con due schermi (con cuciture, noto anche come dual screen) a destra.

Questi dispositivi presentano difficoltà e opportunità agli sviluppatori. Offrono modi aggiuntivi per visualizzare i contenuti. Ad esempio, un utente potrebbe tenere un dispositivo senza interruzioni come un libro e poi passare a utilizzarlo come un tablet con un schermo piatto. I dispositivi con due schermi hanno un join fisico tra gli schermi che potrebbe essere necessario tenere in considerazione.

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 modi, tramite CSS e JavaScript.

API Device Posture

I dispositivi pieghevoli hanno funzionalità che consentono di cambiare la loro_ postura_, ovvero lo stato fisico del dispositivo. Possono modificare il proprio fattore di forma consentendo agli autori di contenuti di offrire un'esperienza utente diversa e queste nuove API assicurano che i contenuti web possano reagire ai vari stati di piegatura.

Un dispositivo può trovarsi in due posizioni:

  • folded: Posture con laptop o libro.

Disegno schematico di dispositivi in posizioni piatte o tablet e un display curvo senza interruzioni.

  • continuous: display piatti, da tablet o anche curvi senza interruzioni.

Disegno schematico di dispositivi in posizione laptop o libro.

CSS

La specifica dell'API Device Posture definisce una nuova caratteristica media CSS: device-posture. Questa funzionalità multimediale si risolve in un insieme di posture fisse. Queste posizioni sono costituite da una serie di valori predefiniti che comprendono ciascuno uno stato fisico del dispositivo.

I valori dell'attributo device-posture corrispondono alla descrizione precedente delle possibili posizioni:

  • folded
  • continuous

In futuro potrebbero essere aggiunte nuove posizioni se verranno lanciati nuovi dispositivi sul mercato.

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 posizione di un dispositivo, è disponibile un nuovo oggetto DevicePosture.

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

Per reagire alle variazioni dell'orientamento del dispositivo, ad esempio quando un utente apre completamente un dispositivo e quindi 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 Segments

I segmenti del viewport sono variabili di ambiente CSS che definiscono la posizione e le dimensioni di una regione del viewport separata in modo logico. I segmenti del viewport vengono creati quando il viewport è suddiviso da una o più funzionalità hardware (come una piega o una cerniera tra display separati) che fungono da divisori. I segmenti sono le regioni del viewport che possono essere trattate come distintamente logiche dall'autore.

CSS

Il numero di divisioni logiche viene esposto tramite due nuove funzionalità multimediali, definite nella specifica di livello 5 delle query multimediali CSS: vertical-viewport-segments e horizontal-viewport-segments. Si risolvono nel numero di segmenti in cui è suddivisa l'area visibile.

Inoltre, sono state aggiunte nuove variabili di ambiente per eseguire query sulle dimensioni di ogni suddivisione 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 rispettivamente la posizione x e y nella griglia bidimensionale creata dalle funzionalità hardware che separano i segmenti.

Diagramma che mostra segmenti orizzontali e verticali. 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 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 della 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.

Smartphone pieghevole in posizione verticale come un libro.

Smartphone pieghevole in posizione orizzontale come un libro.

Tablet pieghevole con postura a libro orizzontale.

JavaScript

Per ottenere il numero di segmenti del viewport, controlla la voce segments in visualViewport.

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

Ogni voce dell'array segments rappresenta ogni segmento logico dell'area visibile con un DOMArray che descrive le coordinate e le dimensioni. Il campo segments è uno snapshot dello stato specificato quando viene eseguita una query. Per ricevere valori aggiornati, devi ascoltare le modifiche della postura o gli eventi di ridimensionamento ed eseguire nuovamente una query sulla proprietà segments.

Prova le API per dispositivi pieghevoli

Le API Foldable sono disponibili in una prova dell'origine da Chrome 125 a Chrome 128. Consulta la guida introduttiva alle prove dell'origine per informazioni di base sulle prove dell'origine.

Per i test locali, le API per i dispositivi pieghevoli possono essere attivate con il flag Funzionalità della piattaforma web sperimentale all'indirizzo chrome://flags/#enable-experimental-web-platform-features. Può essere attivata anche eseguendo Chrome dalla riga di comando con --enable-experimental-web-platform-features.

Demo

Per le demo, consulta il repository demos. Se non hai un dispositivo fisico con cui eseguire il test, puoi scegliere il dispositivo emulato Galaxy Z Fold 5 o Asus Zenbook Fold in Chrome DevTools e passare dalla modalità Continuo a quella Piegata e viceversa. Puoi anche visualizzare la cerniera, se applicabile.

Chrome DevTools che emula un dispositivo pieghevole.