Safari 27.1 présente des API web pour les écrans pliables : que faut-il tester ?

Le 23 octobre 2026, l’équipe WebKit d’Apple a présenté Safari 27.1 (en anglais) , à l’occasion de l’arrivée de l’iPhone Duo. Cette mise à jour pose une question concrète aux concepteurs web : comment la page réagit-elle lorsque l’espace disponible change à l’ouverture ou à la fermeture d’un appareil pliable, ou lorsque deux fenêtres s’affichent côte à côte ?

Un point rassurant : les sites adaptatifs ordinaires n’ont pas besoin de code propre à cet appareil. WebKit indique que Safari sur iPhone Duo utilise le même moteur et les mêmes technologies web que sur les autres iPhone. CSS Grid, Flexbox et les requêtes média restent le point de départ recommandé.

La nouveauté plus expérimentale concerne deux API destinées aux écrans pliables : Device Posture et Viewport Segments. Elles sont accessibles derrière des options de développement. Il ne s’agit donc pas de fonctionnalités activées par défaut sur lesquelles tous les sites en production pourraient compter.

Ce qui change dans Safari 27.1

WebKit décrit trois comportements à retenir :

• La lecture des PDF s’adapte au pli. Un PDF peut afficher deux pages côte à côte lorsque le téléphone est partiellement plié comme un livre, puis revenir à une seule page dans les autres positions.
• Les dimensions de la zone d’affichage varient selon la position. WebKit documente des largeurs allant approximativement de 382 à 951 pixels CSS selon la configuration de l’iPhone Duo, y compris des fenêtres étroites lorsque deux applications se partagent l’écran intérieur.
• Des API tenant compte du pli sont proposées à l’essai. Les développeurs peuvent activer Device Posture et Viewport Segments dans les options expérimentales de Safari pour explorer des mises en page autour d’une charnière ou d’un pli.

Cela ne signifie pas que les sites tiers reçoivent automatiquement des informations sur l’état du pli. Ces API restent expérimentales et leurs modalités peuvent évoluer.

Comment les API peuvent adapter la mise en page

L’API Device Posture indique si un écran compatible est partiellement plié (folded) ou plat (continuous). Un appareil entièrement fermé qui utilise son écran extérieur plat indique lui aussi continuous. Une amélioration CSS peut être limitée à cet état :

@media (device-posture: folded) {
  .reader-layout {
    /* Enhancement for a supported folded display */
  }
}

L’API Viewport Segments décrit les régions d’affichage utilisables de part et d’autre d’un pli. Lorsque la prise en charge correspondante est activée, la requête @media (horizontal-viewport-segments: 2) permet d’identifier deux segments côte à côte. La position de l’appareil et le nombre de segments décrivent deux choses différentes ; ne supposez pas que tout appareil plié possède deux segments horizontaux.

Pour les pages ordinaires en production, gardez une mise en page principale indépendante de ces fonctionnalités expérimentales. Une grille adaptative qui se réorganise selon la largeur réellement disponible convient à bien plus de situations qu’une règle visant un téléphone précis.

Ce que les équipes web peuvent tester dès maintenant

Concentrez-vous sur les zones d’affichage étroites, les fenêtres côte à côte, les changements d’orientation et les textes qui occupent plus de place avec le zoom ou une traduction. Vérifiez que les menus restent accessibles, que les formulaires ne débordent pas et que les contrôles importants ne sont pas rognés.

Les images comptent aussi. Lorsqu’une page passe d’une colonne étroite à une grande surface, utilisez des attributs srcset et sizes adaptés plutôt que de servir systématiquement la plus grande image. Notre guide des images adaptatives explique comment vérifier les téléchargements réels.

Pour les composants visuels, le Studio de couleurs aide à comparer les associations de texte et de fond, tandis que le générateur de Lorem Ipsum fournit des textes plus longs pour mettre la mise en page à l’épreuve. Ces outils ne simulent pas un appareil pliable ; ils aident à préparer des pages de test réalistes.

WebKit précise aussi que Xcode 27.1 ou une version ultérieure et ses outils de simulation permettent de tester l’iPhone Duo sans posséder l’appareil. Dans les réglages de l’appareil ou du simulateur, suivez le chemin indiqué par WebKit en anglais : Settings > Apps > Safari > Advanced > Feature Flags, puis activez Device Posture API et Viewport Segments API. Testez la page avec ces options désactivées comme activées.

Garder la page utilisable sans les API expérimentales

Au 26 octobre 2026, Safari 27.1 est disponible, mais ses API liées aux écrans pliables restent des aperçus expérimentaux pour développeurs, à activer explicitement. Ne les considérez pas comme un socle commun à tous les navigateurs et ne faites pas dépendre la navigation essentielle de leur présence.

Pour une vérification plus large de la compatibilité avec Safari, notre actualité sur sa protection contre le suivi par résolution d’identité présente une autre raison de tester des parcours complets : des requêtes tierces facultatives peuvent être bloquées même si la mise en page fonctionne.

Pour cette vérification de la mise en page, commencez par du contenu long issu du générateur de Lorem Ipsum, redimensionnez la page et cherchez les endroits où menus, formulaires ou images cessent de s’adapter. Ajoutez un comportement propre aux écrans pliables seulement si la page de base reste utilisable sans lui.