Chrome sta provando due API, l'API Device Posture e l'API Viewport Audiences Enumration, che sono disponibili come prova dell'origine da Chrome 125. note collettivamente come API pieghevoli, progettate per aiutare gli sviluppatori a scegliere come target i dispositivi pieghevoli. Questo post illustra 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 giunture) e dispositivi con due schermi (con cucitura, anche noti come dispositivi dual screen).
Questi dispositivi presentano sfide e opportunità per gli sviluppatori. Forniscono ulteriori modalità di visualizzazione dei contenuti. Ad esempio, un utente potrebbe tenere in mano un dispositivo senza giunture come un libro e poi passare a utilizzarlo come un tablet con schermo piatto. I dispositivi con due schermi presentano un join fisico tra gli schermi che potrebbe dover essere preso 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 loro di cambiare la loro posizione, ovvero lo stato fisico del dispositivo. Possono modificare il fattore di forma consentendo agli autori dei contenuti di offrire un'esperienza utente diversa e queste nuove API assicurano che i contenuti web possano reagire ai vari stati di folding.
Un dispositivo può trovarsi in due posizioni:
folded: posture laptop o libri.
continuous: display piatti, tablet o anche curvi in modo fluido.
CSS
La specifica dell'API Device Posture definisce una nuova funzionalità multimediale del CSS: device-posture. Questa funzionalità multimediale si risolve in un insieme di posizioni fisse. Queste posizioni sono composte da una serie di valori predefiniti, ciascuno dei quali include uno stato fisico del dispositivo.
I valori della funzionalità device-posture corrispondono alla precedente descrizione di possibili posizioni:
foldedcontinuous
Se nuovi dispositivi verranno sul mercato, potrebbero essere aggiunte nuove posizioni.
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 posizione del dispositivo, ad esempio quando un utente apre completamente un dispositivo e
passa quindi 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 Audiences
I segmenti dell'area visibile sono variabili di ambiente CSS che definiscono la posizione e le dimensioni di una regione dell'area visibile logicamente separata. I segmenti dell'area visibile vengono creati quando l'area visibile è suddivisa in base a una o più funzionalità hardware (ad esempio, una piegatura o una cerniera tra display separati) che fungono da divisore. I segmenti sono le aree dell'area visibile che possono essere trattate come logicamente distinte dall'autore.
CSS
Il numero di divisioni logiche è esposto tramite due nuove funzionalità multimediali, definite nella specifica CSS Media Queries Livello 5: vertical-viewport-segments e horizontal-viewport-segments. Risolve il numero di segmenti in cui è suddiviso l'area visibile.
Inoltre, sono state aggiunte nuove variabili di ambiente per eseguire query sulle dimensioni di ogni 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 rispettivamente la posizione x e y nella griglia bidimensionale creata dalle funzionalità hardware che separano i segmenti.
Il seguente snippet di codice è un esempio semplificato di creazione di un'esperienza utente suddivisa in cui sono presenti due sezioni di contenuti (col1 e col2) su ciascun lato del fold.
<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 foto che seguono mostrano l'esperienza su un dispositivo fisico.
JavaScript
Per ottenere il numero di segmenti dell'area visibile, controlla la voce segments in
visualViewport.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Ogni voce nell'array segments rappresenta ogni segmento logico del
viewport con una DOMArray che descrive le coordinate e le dimensioni. Il campo segments
è un'istantanea dello stato specificato quando viene eseguita la query. Per ricevere valori aggiornati
devi ascoltare le modifiche alla postura o ridimensionare gli eventi ed eseguire una nuova query sulla
proprietà segments.
Prova le API pieghevoli
Le API pieghevoli sono disponibili in una prova dell'origine da Chrome 125 a Chrome 128. Consulta la pagina 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 il flag delle funzionalità della piattaforma web sperimentale all'indirizzo chrome://flags/#enable-experimental-web-platform-features. Per attivarlo,
può anche eseguire Chrome dalla riga di comando con
--enable-experimental-web-platform-features.
Demo
Per le demo, consulta il repository demo. 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 da Continuo a Folded. Puoi anche visualizzare la cerniera se possibile.
