Comment fonctionnent les requêtes média dans le contexte des applications mobiles?

Les requêtes média dans le contexte des applications mobiles ne sont pas directement utilisées pour styliser les composants UI natifs. Elles font partie de CSS et sont utilisées pour la conception réactive du contenu web affiché dans WebView ou dans un navigateur sur un appareil mobile.

Principe de fonctionnement dans le contexte mobile (pour le contenu web dans WebView/navigateur):

1. La page web est chargée dans WebView ou dans un navigateur mobile.
2. Le navigateur/WebView détermine les caractéristiques de l’appareil ou de la fenêtre de visualisation:
   • Largeur et hauteur de l’écran (width, height, min-width, max-height, etc.)
   • Orientation (orientation: portrait ou landscape)
   • Résolution (resolution)
   • Type d’appareil (media type, par exemple, screen)
   • Autres caractéristiques (par exemple, prefers-color-scheme).
3. Le parseur CSS analyse les styles, y compris les requêtes média.
4. Les règles CSS dans les blocs @media ne s’appliquent que si les conditions de la requête média correspondent aux caractéristiques actuelles de l’appareil/de la fenêtre.

Exemple d’utilisation:

/* Styles de base pour toutes les tailles */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Appliqué aux écrans jusqu’à 768px de large (typiquement pour mobiles/tablettes) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Exemple de changement de mise en page */
  }
}

/* Appliqué aux écrans de plus de 769px de large (typiquement pour tablettes/ordinateurs de bureau) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Afficher la barre latérale sur grands écrans */
  }
}

/* Appliqué en mode paysage */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Dans les applications mobiles natives, l’adaptabilité est obtenue par d’autres mécanismes:

• Frameworks UI natifs: (par exemple, Auto Layout sur iOS, ConstraintLayout sur Android) permettent de décrire les relations entre les éléments UI qui s’adaptent à la taille et à l’orientation de l’écran.
• Taille des appareils et densité de pixels: Les développeurs utilisent différentes ressources (par exemple, ressources drawable sur Android, assets sur iOS) pour différentes résolutions et densités d’écran.
• Code: modification dynamique de la disposition et de la taille des éléments en fonction des propriétés de l’appareil, obtenues par programmation.

Ainsi, les requêtes média sont importantes pour WebViews et Applications web progressives (PWA) qui fonctionnent dans un environnement de navigateur mobile, mais ne constituent pas la base de l’adaptabilité dans les applications mobiles natives pures.