device-posture

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La caractéristique média CSS device-posture permet de détecter la posture actuelle d'un appareil, c'est-à-dire si la zone d'affichage est à plat (continuous) ou repliée (folded).

Syntaxe

La caractéristique device-posture se définit à l'aide d'une valeur-mot-clé choisie parmi la liste suivante :

continuous: Indique un état d'écran à plat. Les appareils pliables sont continuous lorsqu'ils sont à plat, qu'ils soient complètement ouverts ou fermés. Les appareils non pliables sont considérés comme à plat et donc toujours continuous — cela inclut les écrans incurvés sans jointure ainsi que les écrans classiques d'ordinateurs de bureau, portables, tablettes et mobiles.
folded: Indique un état d'écran replié. Les appareils pliables sont folded lorsqu'ils sont utilisés en posture de livre ou d'ordinateur portable.

Dans cet exemple, la caractéristique média device-posture détecte lorsqu'un appareil est en posture repliée, et ajoute une marge selon son orientation pour créer un espace plus large entre les deux panneaux de l'application et faciliter la lecture.

css

@media (device-posture: folded) and (orientation: landscape) {
  .list-view {
    margin-inline-end: 60px;
  }
}

@media (device-posture: folded) and (orientation: portrait) {
  .list-view {
    margin-block-end: 60px;
  }
}

Pour voir le code ci-dessus en action, consultez la démo de l'API Device Posture ^(angl.) sur un appareil pliable si possible. Les outils de développement des navigateurs permettent d'émuler des appareils pliables, mais n'incluent pas l'émulation des appareils partiellement repliés — seulement des appareils complètement ouverts ou fermés — donc ils retourneront toujours continuous.