Dernièrement je me suis rendu compte que la grille Bootstrap ne fonctionnait pas pour les Iphone 5S. J’ai donc fait une recherche sur les différentes grilles existantes pour voir celles qui sont compatibles de celles qui ne le sont pas.
La cause de la non compatibilité
N’ayant pas d’Iphone, j’ai fait ma recherche en me basant sur la navigateur Safari 5.1.7 disponible sur pc.
J’ai constaté que plusieurs grilles responsives ne fonctionnaient pas sous ce navigateur, comme :
- Gridlex : suivre ce lien.
- Gridy : suivre ce lien.
- Bootstrap version 4.0 : suivre ce lien.
Et d’autres qui fonctionnent, comme :
- Crow : suivre ce lien.
- Profound grid : suivre ce lien.
- Simple grid : suivre ce lien.
- CSS wizardry grids : suivre ce lien.
- Simple grid : suivre ce lien.
- Skeleton : suivre ce lien.
- Bootstrap version 4.1 : suivre ce lien.
A l’heure où j’écris cet article, je constate qu’une nouvelle version Bootstrap a été réalisée et que cette dernière fonctionne avec Safari 5.1.7. Du coup je liste la version qui fonctionne.
Ce qui était gênant dans les versions qui fonctionnaient c’était le fait qu’elles n’aient que deux breakpoint :
- version mobile
- version destop
Et pas d’intermédiaire comme le propose les autres grilles.
Lors de cette recherche la grille Gridy m’a interpellée. Simple d’utilisation et surtout avec des class différentes des autres grilles ce qui permet de ne pas être en conflit avec d’autres librairies comme Bootstrap si on souhaite utiliser Gridy et Bootstrap ensemble.
Solutions
La nouvelle version de Bootstrap règle le problème à priori, je conseille donc son utilisation.
Sinon pour palier au problème de l’usage des autres grilles responsive il suffit de résoudre l’utilisation de flex sans alternative pour les navigateurs qui ne le supportent pas.
Pour cela je conseille l’utilisation de Modernizr qui détecte les technos supportées par les navigateurs [suivre ce lien]. Puis d’ajuster le CSS par des « display: inline-block; » si .no-flexbox est retourné par Modernizr.