device-posture
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
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
Loading…