Une charnière peut changer la page, pas seulement le matériel
La charnière d'un appareil peut modifier une page web, et pas seulement le matériel. La fonctionnalité média CSS device-posture offre un moyen puissant d'adapter le contenu web. Elle distingue un écran continuous, comme une tablette plate, d'une posture folded (pliée), permettant aux styles de répondre directement à l'état physique de l'appareil.
Une vidéo récente de Better Stack a démontré cela en montrant une page passant de "plat" à "plié" lorsqu'un appareil pliable Apple hypothétique était plié. Bien que la vidéo fasse référence à un "téléphone pliable à 2 000 $" ou à un "iPhone Surface Duo", Apple n'a annoncé aucun produit de ce type ; ce sont des exemples spéculatifs pour illustrer la technologie.
Cette capacité, également disponible via une API JavaScript, ne sert pas seulement à faire de l'esbroufe. L'objectif est une conception utile. Par exemple, un lecteur vidéo pourrait s'afficher en plein écran lorsque l'appareil est continuous, puis s'adapter automatiquement pour afficher la vidéo sur un segment et les détails des chapitres ou les commentaires sur l'autre lorsqu'il est folded.
Google Chrome prend déjà en charge ces fonctionnalités, et Samsung Internet offre des capacités similaires depuis des années pour des appareils comme le Galaxy Z Fold. Safari a implémenté les API dans un simulateur "iPhone Surface Duo", bien qu'elles restent derrière un indicateur de fonctionnalité (feature flag), ce qui indique un développement précoce plutôt qu'une disponibilité générale. Firefox ne prend pas encore en charge ces fonctionnalités.
Laissez JavaScript réagir lorsque l'appareil se plie
Tout comme le CSS s'adapte à l'état physique d'un appareil, JavaScript offre un équivalent puissant : la Device Posture API. Vous pouvez accéder à la posture actuelle via navigator.devicePosture et, plus important encore, écouter les changements en utilisant son événement change. Cet événement se déclenche chaque fois que l'appareil passe d'un état à un autre, comme continuous (plat) et folded (plié), permettant à votre application web de réagir dynamiquement.
Imaginez bien plus qu'un simple compteur de pliage ludique ! Avec cette API, vous pouvez implémenter des comportements vraiment utiles. Un lecteur vidéo pourrait automatiquement mettre la lecture en pause lorsque l'appareil se plie, évitant les sauts accidentels, ou un éditeur de texte pourrait enregistrer les modifications non sauvegardées. Pour les tâches en plusieurs étapes, un pliage pourrait déclencher une transition vers l'étape suivante, garantissant que le contexte de l'utilisateur reste intact.
N'oubliez pas que la posture est un signal, pas une instruction pour l'utilisateur. Évitez de surprendre les utilisateurs en modifiant radicalement les fonctionnalités principales ou en rendant les actions plus difficiles d'accès simplement parce que l'appareil s'est plié. Utilisez plutôt ces signaux pour améliorer l'expérience, en veillant à ce que les actions principales restent intuitives et accessibles, que l'écran soit plat ou plié. Google Chrome et Samsung Internet prennent déjà en charge ces fonctionnalités, offrant des outils robustes pour créer des interfaces adaptables.
Transformez le pli en limite de mise en page
Les charnières physiques sur les appareils pliables ne sont pas seulement des caractéristiques matérielles ; elles peuvent diviser un seul écran en plusieurs segments de fenêtre d'affichage (viewport segments). Cela signifie qu'un écran plié peut exposer des régions logiques distinctes, permettant aux développeurs d'assigner un contenu complémentaire à chaque côté. Au lieu de placer maladroitement des commandes ou du contenu clés directement sur le pli, vous pouvez concevoir des volets distincts.
Prenons l'exemple d'un lecteur vidéo : lorsque l'appareil est plat, il peut occuper tout l'écran. Mais lorsqu'il est plié, vous pourriez conserver la lecture vidéo sur un segment et afficher les chapitres, les descriptions ou les commentaires sur l'autre. Cela crée une expérience utilisateur plus intuitive et efficace, tirant le meilleur parti de ce facteur de forme unique.
CSS propose des segment media features comme horizontal-viewport-segments et vertical-viewport-segments pour détecter et styliser ces régions individuelles. Vous pouvez dimensionner les éléments avec précision en utilisant des variables d'environnement telles que env(viewport-segment-width 0 0) ou env(viewport-segment-height 0 0) au sein d'expressions calc(). Cela aide à éviter de placer des éléments d'interface critiques directement sur la charnière physique.
Bien que ces outils soient puissants, assurez-vous toujours que vos mises en page se dégradent gracieusement sur les écrans traditionnels et continus. Google Google Chrome et Samsung Internet prennent en charge ces fonctionnalités depuis des années, et WebKit progresse également derrière des flags. Pour des détails techniques plus approfondis, explorez la spécification Device Posture API - W3C.
Cet article vous plaît ? Recevez-en un comme celui-ci chaque matin.
un e-mail par jour · désinscription en deux clics · aucun traqueur tiers
Développez pour les navigateurs d'aujourd'hui, pas pour un iPhone hypothétique
Alors, où pouvez-vous réellement utiliser ces fonctionnalités intelligentes pour appareils pliables aujourd'hui ? Google Google Chrome et Samsung Internet sont en tête, offrant une prise en charge robuste de device-posture et des segments de fenêtre d'affichage. Samsung Internet a été le pionnier de ces fonctionnalités il y a des années pour ses appareils Galaxy Z Fold et Flip, tandis que Google Google Chrome les a récemment fait passer des essais d'origine à une prise en charge de base.
Firefox, malheureusement, ne prend pas actuellement en charge ces API. Safari et WebKit ont montré des travaux expérimentaux au sein d'un simulateur spécifique "iPhone Surface Duo", mais ces fonctionnalités restent derrière un flag et ne sont pas disponibles de manière générale. Vérifiez toujours les références MDN actuelles et les tableaux de compatibilité des navigateurs, car le support évolue rapidement avec chaque nouvelle version de navigateur.
Lorsque vous développez pour des appareils pliables, adoptez l'amélioration progressive. Tout d'abord, détectez si navigator.devicePosture existe avant d'essayer de l'utiliser. Ensuite, concevez une mise en page de base utile qui fonctionne bien sur tous les écrans continus, puis ajoutez des styles spécifiques aux appareils pliables.
Testez toujours votre interface lors des transitions de posture. Ne faites jamais dépendre un contenu ou une fonctionnalité essentielle uniquement d'un état plié ; assurez une expérience fluide, que l'appareil soit à plat ou plié. Vos utilisateurs vous remercieront pour cette conception réfléchie.
Questions fréquemment posées
Que fait la media query CSS device-posture ?
Elle permet à une page web d'appliquer des styles en fonction de la posture physique d'un appareil, par exemple si un écran pliable est plié ou continu.
Comment les segments de fenêtre d'affichage aident-ils avec les écrans pliables ?
Ils exposent les régions distinctes d'un affichage segmenté afin qu'une page puisse placer du contenu de chaque côté d'une charnière ou d'un pli.
JavaScript peut-il détecter quand un téléphone pliable change de posture ?
Oui. L'API Device Posture expose la posture actuelle et un événement de changement qui permet à une page de réagir lorsqu'elle change.
Tous les navigateurs prennent-ils en charge les API web pour appareils pliables ?
Non. Le support varie : les navigateurs basés sur Chromium et Samsung Internet offrent des capacités, tandis que Firefox manque d'implémentation et le support de Safari est resté expérimental.
Apple a-t-il sorti un iPhone pliable ?
Aucun iPhone pliable n'a été annoncé. La vidéo traite d'un appareil hypothétique et rapporte des travaux expérimentaux de Safari, et non un produit Apple confirmé.