Chrome teste deux API : l'API Device Posture et les segments de fenêtre d'affichage L'API Enumeration, disponible en tant qu'évaluation de l'origine dans Chrome 125. Ces API sont collectivement désignées sous le nom d'API Foldable, conçues pour aider les entreprises les développeurs ciblent les appareils pliables. Cet article présente ces API fournit des informations sur la façon de commencer à les tester.
Il existe principalement deux facteurs de forme physiques différents: les appareils dotés d'un seul écran flexible (sans couture) et les appareils à deux écrans (avec la jointure, également appelés que les appareils à double écran).
Ces appareils représentent des défis et des opportunités pour les développeurs. Ils offrent d'autres façons de regarder des contenus. Par exemple, un utilisateur peut détenir un comme un livre, puis de l'utiliser comme une tablette avec un un écran plat. Les appareils avec deux écrans ont une jointure physique entre les écrans que vous devrez peut-être prendre en compte.
Ces nouvelles API permettent aux développeurs d'améliorer l'expérience utilisateur pour ces appareils. Chaque API expose les primitives de la plate-forme Web nécessaires dans deux à l'aide des langages CSS et JavaScript.
API Device Posture
Les appareils pliables disposent de fonctionnalités qui leur permettent de modifier leur_position_, ou l'état physique de l'appareil. Ils peuvent modifier leur facteur de forme aux auteurs de contenu pour offrir une expérience utilisateur différente, et ces nouvelles API rendent s'assurer que le contenu Web peut réagir aux différents états de pliage.
Un appareil peut se trouver dans deux positions:
folded
: positions sur ordinateur portable ou livre.
continuous
: écrans plats, tablettes ou même incurvés pour un rendu fluide.
CSS
La spécification de l'API Device Posture définit un nouveau CSS media-feature : device-posture. Cette fonctionnalité multimédia résout un ensemble de positions fixes. Ces postures consistent un certain nombre de valeurs prédéfinies englobant chacune un état physique appareil.
Les valeurs de la caractéristique device-posture
correspondent à la description précédente de
postures possibles:
folded
continuous
De nouvelles stratégies pourraient être ajoutées à l'avenir si de nouveaux appareils étaient commercialisés.
Exemples :
/* 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
Un nouvel objet DevicePosture
est disponible pour interroger la position d'un appareil.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Pour réagir aux changements de position de l'appareil, par exemple lorsqu'un utilisateur ouvre complètement l'appareil
Par conséquent, passez de folded
à continuous
, abonnez-vous aux événements change
.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
API Viewport Segments
Les segments de la fenêtre d'affichage sont des variables d'environnement CSS qui définissent la position d'une zone logiquement séparée de la fenêtre d'affichage. Les segments de fenêtre d'affichage sont créée lorsque la fenêtre d'affichage est divisée par une ou plusieurs caractéristiques matérielles (comme un pli ou une charnière entre des écrans séparés) qui servent de séparateur. Les segments sont les zones de la fenêtre d'affichage qui peuvent être traitées comme des éléments logiquement distincts par auteur.
CSS
Le nombre de divisions logiques est exposé
grâce à deux nouvelles fonctionnalités multimédias :
défini dans la spécification du niveau 5 des requêtes média CSS:
vertical-viewport-segments
et horizontal-viewport-segments
. Ils sont déterminés à
le nombre de segments dans lesquels la fenêtre d'affichage est divisée.
En outre, de nouvelles variables d'environnement ont été ajoutées pour interroger les dimensions chaque division logique. Ces variables sont les suivantes:
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)
Chaque variable a deux dimensions, qui représentent les positions x et y, respectivement dans la grille bidimensionnelle créée par les caractéristiques matérielles séparer les segments.
<ph type="x-smartling-placeholder">![Diagramme illustrant des segments horizontaux et verticaux Le premier segment horizontal est x 0 et y 0, le second x 1 et y 0. Le premier segment vertical est x 0 et y 0, le second x 0 et y 1.](https://developer.chrome.com/static/blog/foldable-apis-ot/origintrialfor--eaocssmg9t.png?authuser=9&hl=fr)
L'extrait de code suivant est un exemple simplifié de création d'une expérience utilisateur fractionnée dans laquelle nous avons deux sections de contenu (col1 et col2) de chaque côté de la ligne de flottaison.
<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>
Les photos suivantes montrent à quoi ressemble l'expérience sur un appareil physique.
JavaScript
Pour obtenir le nombre de segments de fenêtre d'affichage, vérifiez l'entrée segments
dans la
visualViewport
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Chaque entrée du tableau segments
représente chaque segment logique du
fenêtre d'affichage avec un élément DOMArray
décrivant les coordonnées et la taille. segments
est un instantané de l'état donné lorsqu'il est interrogé, afin de recevoir
dont vous avez besoin pour écouter les changements de position, redimensionner les événements et interroger à nouveau
segments
.
Essayer les API Foldable
Les API Foldable sont disponibles dans un phase d'évaluation de Chrome 125 à Chrome 128. Voir Premiers pas avec les phases d'évaluation pour obtenir des informations générales sur les phases d'évaluation.
Pour les tests en local, les API pliables peuvent être activées avec la version expérimentale
Option des fonctionnalités de la plate-forme à l'adresse
chrome://flags/#enable-experimental-web-platform-features
Il peut aussi être
en exécutant Chrome depuis la ligne de commande avec
--enable-experimental-web-platform-features
Démonstrations
Pour voir les démonstrations, consultez les un dépôt de clés. Si vous ne disposez pas d'un un appareil physique à tester, vous pouvez opter pour le Galaxy Z Fold 5 ou le Asus appareil émulé Zenbook Fold dans les outils pour les développeurs Chrome et basculer entre Continue et Plié. Vous pouvez également visualiser la charnière lorsque applicables.
Liens associés
- API Device Posture <ph type="x-smartling-placeholder">
- API Viewport Segments <ph type="x-smartling-placeholder">