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
continuouslorsqu'ils sont à plat, qu'ils soient complètement ouverts ou fermés. Les appareils non pliables sont considérés comme à plat et donc toujourscontinuous— 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
foldedlorsqu'ils sont utilisés en posture de livre ou d'ordinateur portable.
Exemples
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.
@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.
Spécifications
| Specification |
|---|
| Device Posture API> # the-device-posture-media-feature> |
Compatibilité des navigateurs
Chargement…