Gérer son responsive pour l’Iphone X

Actualisé le 17 septembre 2017

Si vous avez suivi la sortie du nouvel iPhone, peut-être un détail vous a marqué en tant qu’intégrateur : non pas son prix (à ce stade ce n’est plus un détail) mais plutôt sa zone d’affichage. En effet la partie utile de l’écran de l’iPhone X n’est pas rectangulaire mais un léger décoché apparaît sur la zone du haut… et cela l’air de rien va rajouter un peu de travail en plus de notre côté.

Comme vous pouvez le voir sur l’exemple ci-dessous, des zones blanches apparaissent sur les sites lorsque l’on utilise son iPhoneX en mode paysage. Pas très gracieux tout ça, du coup il va falloir user d’un paramètre du viewport en plus pour dire à notre navigateur d’iOS de prendre toute la taille de l’écran.

Si à ce moment là vous avez un background en couleur, vous verrez que toute la zone d’affichage du site s’étend bien sur tout l’écran. Toutefois, si certains éléments de votre site sont calés sur le côté droit, ceux-ci vont passer sous le décoché… Il vous faudra donc utiliser quelques lignes de CSS supplémentaires, pour créer un padding “intelligent”, qui prendra en compte une taille fournie par le device, qui correspondra à un padding d’une “safe-area”.

 

Au final, rien de compliqué à gérer, reste à savoir le niveau de popularité qu’aura l’iPhoneX et si cela ne provoquera aucune autre perturbation. De plus nous pouvons imaginer que d’autres appareils sortiront dans les mois et années à venir avec des écrans semblables ou encore plus difformes.

Commentaires

Laisser un commentaire