Les pliables deviennent enfin grand public
L'annonce récente par Apple de l'iPhone Duo, au prix de 1 999 $, marque un tournant décisif pour le développement web. Disponible le 23 octobre 2026, cet appareil, doté d'un écran externe de 5,4 pouces et d'un écran interne de 7,6 pouces, propulse les téléphones pliables du rang de curiosité de niche à celui de réalité grand public pour tous les développeurs web. Ignorer ces formats adaptables n'est plus une option.
Heureusement, les ingénieurs des navigateurs ont anticipé ce changement. Nous disposons désormais d'une puissante media query CSS, @media (device-posture: folded), conçue spécifiquement pour ces appareils. Cette requête détecte si un appareil est dans un état folded (plié), comme un livre ou un ordinateur portable miniature, plutôt que dans sa posture continuous (à plat). Elle permet aux développeurs d'appliquer des styles ciblés pour des expériences utilisateur optimales à travers diverses configurations physiques.
Imaginez un article de blog. Sur un écran plat et continuous, une mise en page à colonne unique fonctionne parfaitement, maximisant la lisibilité. Cependant, lorsque l'utilisateur plie son iPhone Duo en position de livre, cette colonne unique peut devenir inconfortable à lire au niveau du pli. Avec device-posture, vous pouvez facilement passer à une mise en page à deux colonnes, plaçant élégamment le contenu sur chaque segment d'écran, améliorant instantanément l'utilisabilité et l'interaction.
Cette simple adaptation démontre la puissance immédiate de la media query device-posture. Les développeurs peuvent désormais concevoir des designs réactifs qui s'ajustent de manière fluide non seulement à la taille de l'écran, mais aussi au modèle d'interaction physique de l'appareil lui-même. Chrome prend déjà en charge ces fonctionnalités, et le simulateur iPhone Duo de Safari les inclut, bien que derrière un flag, signalant leur disponibilité imminente à grande échelle.
Rendre votre site conscient du pliage
Au-delà des règles CSS statiques, les expériences web pour appareils pliables brillent vraiment grâce aux interactions dynamiques. L'Device Posture API pour JavaScript permet à votre site de réagir à la manière dont un utilisateur tient son iPhone Duo ou tout autre pliable, offrant une expérience plus riche et plus intuitive. Elle va au-delà du simple stylage pour les états plat ou plié, permettant des réactions en temps réel.
Votre application peut écouter un événement change sur la posture de l'appareil, déclenchant des actions chaque fois que l'état du téléphone passe de continuous (plat) à folded (plié). Cela signifie que vous pouvez automatiquement mettre en pause une vidéo lorsqu'un utilisateur commence à fermer son téléphone, ou enregistrer instantanément la progression d'un formulaire lorsqu'il change de posture. Imaginez une application de recettes affichant les ingrédients sur un écran et les instructions sur l'autre, divisant dynamiquement le contenu à mesure que l'appareil se plie.
Détecter ces changements d'état de pliage avec JavaScript est simple. Voici un extrait fondamental :
if ('ondeviceposturechange' in window) { window.addEventListener('deviceposturechange', (event) => { const currentPosture = event.target.devicePosture.type; console.log(`Device posture changed to: ${currentPosture}`); // Implémentez ici des actions dynamiques basées sur currentPosture ('continuous' ou 'folded') });
}Cet écouteur d'événement fournit le devicePosture.type, vous permettant de créer des expériences web pliables plus interactives et intuitives. Chrome et Samsung Internet prennent déjà pleinement en charge cette API, tandis que le simulateur iPhone Duo de Safari l'inclut derrière un feature flag, indiquant une prise en charge future pour l'appareil à 1 999 $ d'Apple.
Concevoir pour deux écrans à la fois
Les appareils pliables introduisent un concept fascinant : les viewport segments. Lorsqu'un iPhone Duo est plié, il présente deux zones d'affichage distinctes, chacune contrôlable indépendamment. Cela va au-delà de la simple réaction à un pliage ; vous pouvez concevoir de véritables expériences à double écran, en traitant chaque segment comme sa propre toile.
Pour placer le contenu avec précision, les développeurs utilisent les variables d'environnement CSS. Par exemple, env(viewport-segment-width) et env(viewport-segment-height) fournissent les dimensions de chaque segment individuel. Cela vous permet de créer des mises en page puissantes et adaptatives, garantissant que les éléments s'alignent parfaitement autour de la charnière ou de l'espace physique.
Envisagez des cas d'utilisation avancés qui tirent réellement parti des doubles écrans. Un lecteur vidéo pourrait occuper un segment, tandis que sa transcription, ses chapitres ou ses commentaires associés s'affichent de manière interactive sur l'autre. De même, un client e-mail pourrait afficher votre liste de réception sur un segment et le contenu complet du message sélectionné simultanément sur le segment adjacent, augmentant ainsi la productivité.
Chrome prend déjà en charge ces fonctionnalités, avec l'API Viewport Segments disponible à partir de Chrome 138. Samsung Internet propose cette fonctionnalité depuis des années sur ses téléphones pliables. Bien que le simulateur iPhone Duo de Safari, publié avec Xcode 27.1, inclue ces API derrière un feature flag, vous pouvez explorer les fonctionnalités CSS associées, comme device-posture, plus en détail sur la documentation MDN Web Docs sur la fonctionnalité média CSS device-posture.
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
La bataille des navigateurs : qui est prêt ?
Nous avons exploré le « pourquoi » de la conception adaptée aux pliables ; regardons maintenant le « où ». Bonne nouvelle : de nombreux outils sont prêts dès aujourd'hui ! Chrome offre une prise en charge stable de la media query device-posture et de l'API JavaScript, y compris l'API Viewport Segments disponible depuis Chrome 138. Cela signifie qu'une part importante du marché des pliables Android peut déjà profiter de vos mises en page améliorées. Samsung Internet défend ces fonctionnalités depuis des années, garantissant une expérience robuste pour sa vaste flotte d'appareils pliables.
Le parcours de Safari ne fait que commencer. Le nouveau simulateur iPhone Duo, publié avec Xcode 27.1, inclut notamment les API device-posture et viewport segments. Cela signale l'intention claire d'Apple de prendre en charge ces capacités. Cependant, ces fonctionnalités sont actuellement dissimulées derrière un feature flag, ce qui signifie que même si Apple se prépare pour la sortie de l'iPhone Duo à 1 999 $ le 23 octobre 2026, la prise en charge complète pourrait ne pas être activée au lancement.
Alors, que doit faire un développeur ? Adopter l'amélioration progressive ! Concevez votre expérience de base pour qu'elle soit solide et accessible sur tous les navigateurs, y compris ceux sans API pour pliables comme Firefox. Ensuite, ajoutez les fonctionnalités avancées device-posture et viewport segments en tant qu'améliorations. Cette stratégie garantit une expérience supérieure et personnalisée pour les utilisateurs d'appareils pliables compatibles — comme un écran divisé pour la vidéo et les notes — sans compromettre la fonctionnalité pour les autres. Il s'agit de s'adapter avec élégance, sans rien casser.
Foire aux questions
Qu'est-ce que la media query CSS device-posture ?
Il s'agit d'une nouvelle fonctionnalité média CSS qui permet aux pages web d'adapter leur mise en page en fonction de l'état physique d'un appareil. Elle possède deux valeurs principales : continuous pour un écran plat et folded pour lorsque l'écran est plié ou articulé.
Comment contrôler le contenu des deux côtés d'un écran plié ?
Vous pouvez utiliser l'API Viewport Segments. Les variables d'environnement CSS comme viewport-segment-width et viewport-segment-height vous permettent de styliser les zones d'écran distinctes de chaque côté du pli, créant ainsi des expériences à double écran.
Quels navigateurs prennent actuellement en charge les fonctionnalités CSS pour pliables ?
Chrome et Samsung Internet prennent entièrement en charge la media query device-posture et l'API Viewport Segments. La prise en charge par Safari est disponible dans le simulateur iPhone Duo mais est actuellement derrière un indicateur de fonctionnalité (feature flag). Firefox ne le prend pas encore en charge.
Quelle est la différence entre la media query CSS et l'API JavaScript pour les appareils pliables ?
La media query CSS device-posture est déclarative, utilisée pour styliser les mises en page en fonction de l'état de l'appareil. L'API JavaScript Device Posture est impérative, vous permettant d'exécuter du code en réponse à des événements de pliage, comme mettre une vidéo en pause ou enregistrer des données.