Ionic - 9.7 Définir des styles spécifiques à la plateforme

Les composants d'une application n'ont pas toujours le même rendu selon l'appareil. Un spinner, par exemple, change entre iOS et Android. Cette leçon montre comment définir un style propre à une plateforme sans casser la mise en page sur les autres appareils.

Pourquoi le rendu varie selon la plateforme

Ionic adapte automatiquement les effets visuels à la plateforme détectée. Un spinner n'a pas le même aspect sur un iPhone et sur un appareil Android. Malgré ces différences, la mise en page reste fonctionnelle et agréable dans les deux cas.

Dans l'inspecteur d'éléments du navigateur, on voit qu'Ionic ajoute automatiquement des classes et un mode selon la plateforme. Le mode iOS apparaît lorsqu'un iPhone est simulé, et le mode MD apparaît lorsqu'un Android est simulé.

Cibler une plateforme dans le CSS

Grâce à ce mode, on sait quelle plateforme est utilisée. On peut alors appliquer des modifications dans le CSS ou dans le fichier de variables SCSS. Par défaut, le sélecteur utilisé est la racine, c'est-à-dire le style général de l'application.

Il est aussi possible de combiner ce sélecteur avec ceux des modes. On peut ainsi ne modifier que les éléments d'une seule plateforme, comme iOS. Par exemple, si la couleur principale du thème passe au vert pour iOS uniquement, ce vert apparaît sur iPhone, et le rendu sur Android ne change pas.

En résumé

Ionic applique automatiquement des classes et un mode selon la plateforme, ce qui permet d'adapter le style à iOS ou à Android. Pour cibler une plateforme, il suffit de combiner le sélecteur avec le mode correspondant. La prochaine leçon traite du style de base avec les variables.

Points clés

• Les effets visuels, comme les spinners, varient entre iOS et Android.
• Ionic ajoute automatiquement un mode, iOS ou MD, selon la plateforme détectée.
• L'inspecteur d'éléments du navigateur permet de voir ces classes et ce mode.
• Un sélecteur combiné au mode ne modifie que la plateforme visée.
• Une couleur changée pour iOS n'a aucun effet sur Android si le ciblage est correct.

Questions fréquentes

Pourquoi un même composant a-t-il un aspect différent selon l'appareil ?

Ionic adapte les effets visuels à la plateforme détectée, comme iOS ou Android, pour que chaque composant suive les usages de l'appareil.

Comment savoir quelle plateforme est détectée ?

Ouvrez l'inspecteur d'éléments de votre navigateur. Ionic ajoute une classe de mode, iOS ou MD, sur les éléments de la page.

Peut-on changer le style d'une seule plateforme ?

Oui. Vous pouvez combiner votre sélecteur avec le mode de la plateforme, par exemple pour changer la couleur principale uniquement sur iOS.