Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

L'iPhone X, un casse-tête pour les développeurs Front-End ?

Le dernier modèle d'Apple risque de poser de nombreux problèmes aux développeurs front-end. Pourquoi ? Car Safari insère désormais automatiquement le contenu de la page web dans un viewport réduit. Ceci est dû à la fois à la présence des capteurs sur l'écran et aux bords arrondis.

Si la page contient un élément en pleine largeur (barre de navigation, image...), le résultat obtenu n'est pas des plus esthétiques.

Un site web borderless

Une nouvelle fonctionnalité sur la méta balise existante viewport, disponible dans iOs 11, offre la possibilité de spécifier la zone du viewport utilisée.

La valeur par défaut de cette nouvelle propriété viewport-fit est auto, correspondant au comportement mis en avant dans la capture précédente. Afin de désactiver la réduction du viewport et d'ainsi rendre la page borderless, il faut utiliser la valeur cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

En utilisant le même site avec la nouvelle valeur, on remarque que l'utilisation de la totalité de la largeur d'écran donne un résultat beaucoup plus satisfaisant :

Notez bien qu'il faut bien définir les marges horizontales nécessaires afin de s'assurer qu'aucun contenu de la page ne soit masqué par les capteurs. La gestion de ces marges est possible en utilisant la nouvelle fonction CSS constant() et les propriétés safe-area-inset-left et safe-area-inset-right mais aussi safe-area-inset-top, et safe-area-inset-bottom (pour plus d'infos).

Ces nouvelles propriétés permettent d'adapter le style autour du capteur, comme le démontre @vojtastavik :

I think I’ve fixed the notch issue in landscape #iphoneX pic.twitter.com/hGytyO3DRV— Vojta Stavik (@vojtastavik) 13 septembre 2017

Pour information, la couleur de fond spécifiée sur les éléments head et body étant appliquée sur les zones exclues de l'affichage par défaut, il n'est pas nécessaire de modifier la méta balise viewport. Voici un exemple avec un viewport-fil="auto" (valeur par défaut).