Les téléphones à écran pliable sont là pour rester : ce que les développeurs web doivent savoir des nouvelles API pour les appareils

Soyons honnêtes : les téléphones à écran pliable rôdent depuis quelques années aux marges du secteur technologique. Les utilisateurs d'Android vivent déjà l'expérience du téléphone pliable, tandis que les autres nous regardaient depuis les tribunes, en baver d'envie devant ces démonstrations d'appareils au design épuré. Mais Apple a fini par franchir le pas et, que vous soyez amateur d'iPhone ou non, ce basculement a des répercussions de taille pour la communauté du développement web.

En suivant de près ce domaine (et il se peut que j'aie passé une quantité de temps plutôt gênante à jouer avec le simulateur de l'iPhone Duo ce week-end), je peux vous dire que les API web qui prennent en charge ces appareils sont étonnamment robustes. Apple a mis en ligne six vidéos consacrées à la création d'applications pour le Duo. Bien qu'une grande partie relève du développement natif iOS, Apple laisse largement la porte ouverte aux développeurs web grâce à plusieurs API réellement intéressantes.

Voyons donc concrètement ce que vous pouvez utiliser dès aujourd'hui.

Device Posture API : identifier le pliage de l'appareil

Commençons par la Device Posture API. Cette petite interface astucieuse vous permet de savoir si l'utilisateur se trouve devant un écran à plat, un écran replié ou à mi-pli. C'est comme si l'appareil vous transmettait un compte rendu sur son état physique.

En JavaScript, vous pouvez y accéder via navigator.devicePosture, qui vous indique si l'écran est continuous (écran à plat normal) ou folded (partiellement fermé comme un ordinateur portable). En CSS, c'est encore plus simple avec la requête média device-posture :

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

C'est une avancée majeure pour les lecteurs multimédias, les visionneuses de documents ou toute application qui pourrait tirer parti d'une configuration à deux écrans. Imaginez votre lecteur vidéo déplacer automatiquement ses commandes vers l'écran inférieur lorsque l'appareil est plié — oui, c'est déjà une réalité.

Viewport Segments API : diviser pour mieux régner

Si la Device Posture API vous communique l'état de l'appareil, la Viewport Segments API vous renseigne sur son anatomie. Lorsqu'un téléphone à écran pliable est partiellement fermé, il délimite des zones d'écran distinctes, et cette API vous permet d'accéder à ces segments de manière programmatique.

En JavaScript, window.visualViewport.segments renvoie un tableau de DOMRects décrivant la taille, la forme et la position de chaque segment. En CSS, vous disposez d'une souplesse encore plus grande :

/* Target layouts based on number of segments */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

La conception des variables d'environnement CSS est particulièrement élégante. env(viewport-segment-width 1 0) vous donne la largeur du segment à l'indice horizontal 1 et à l'indice vertical 0. Le système de coordonnées demande un peu de temps pour être compris, mais une fois le principe assimilé, les possibilités sont infinies.

Pourquoi c'est important pour vos projets

Voici le point essentiel : les téléphones à écran pliable ne constituent plus un produit de niche. Ils deviennent des produits de masse, et les API web sont déjà disponibles pour les prendre en charge. Chez NameOcean, nous parlons souvent de conception pour l'avenir, et cet exemple montre parfaitement pourquoi c'est important.

Pour les startups et les développeurs, cela ouvre des modes d'interaction entièrement nouveaux. Une application de voyage pourrait afficher une carte sur un écran et les informations de réservation sur l'autre. Un site de commerce en ligne pourrait présenter les images des produits sur un segment et les avis sur un autre. Un éditeur de code pourrait enfin offrir aux développeurs mobiles une véritable expérience en deux volets, sans qu'une application native soit nécessaire.

La ligne de pli n'est pas une limitation, mais une opportunité. Et grâce à ces API, vous pouvez créer des expériences qui donnent l'impression d'être natives sur du matériel à écran pliable, tout en restant accessibles à tous sur le web classique.

Premiers pas

Le meilleur dans tout ça ? Vous n'avez pas besoin de courir acheter un téléphone à écran pliable pour commencer à expérimenter. Safari Technology Preview et Chrome DevTools proposent tous deux des simulateurs permettant de tester ces API. Lancez un appareil virtuel, basculez entre les états à plat et plié, et observez vos mises en page s'adapter en temps réel.

Si vous exploitez un site web professionnel ou une application web, le moment est venu d'auditer votre stratégie de design responsive. La question n'est pas de savoir si les téléphones à écran pliable compteront, mais si vous serez prêt lorsque vos utilisateurs se mettront à les utiliser.

La plateforme web continue d'évoluer de manière fascinante, et des API comme celles-ci montrent qu'elle peut avancer rapidement lorsque le matériel inspire de nouvelles interactions. À vous de jouer, et de tirer parti du pli.