Wie funktionieren Media-Queries im Kontext mobiler…

Medienabfragen im Kontext mobiler Anwendungen werden nicht direkt zur Gestaltung nativer UI-Komponenten verwendet. Sie sind Teil von CSS und werden für das responsive Design von Webinhalten verwendet, die innerhalb von WebView oder einem Browser auf einem mobilen Gerät angezeigt werden.

Funktionsprinzip im mobilen Kontext (für Webinhalte in WebView/Browser):

Die Webseite wird in WebView oder einem mobilen Browser geladen.
Der Browser/WebView ermittelt die Eigenschaften des Geräts oder des Anzeigefensters:
- Breite und Höhe des Bildschirms (width, height, min-width, max-height usw.)
- Orientierung (orientation: portrait oder landscape)
- Auflösung (resolution)
- Gerätetyp (media type, z.B. screen)
- Weitere Eigenschaften (z.B. prefers-color-scheme).
Der CSS-Parser analysiert die Stile, einschließlich der Medienabfragen.
CSS-Regeln innerhalb der @media-Blöcke werden nur angewendet, wenn die Bedingungen der Medienabfrage mit den aktuellen Eigenschaften des Geräts/Fensters übereinstimmen.

Beispiel für die Verwendung:

/* Grundlegende Stile für alle Größen */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Wird auf Bildschirmen bis zu 768px Breite angewendet (typisch für mobile/tablet) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Beispiel für Layoutänderung */
  }
}

/* Wird auf Bildschirmen ab 769px Breite angewendet (typisch für Tablets/Desktops) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Sidebar auf großen Bildschirmen anzeigen */
  }
}

/* Wird im Querformat angewendet */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

In nativen mobilen Anwendungen wird die Anpassungsfähigkeit durch andere Mechanismen erreicht:

Native UI-Frameworks: (z.B. Auto Layout in iOS, ConstraintLayout in Android) erlauben die Beschreibung von Beziehungen zwischen UI-Elementen, die sich an die Größe und Orientierung des Bildschirms anpassen.
Gerätegrößen und Pixeldichte: Entwickler verwenden unterschiedliche Ressourcen (z.B. Drawable-Ressourcen in Android, Assets in iOS) für verschiedene Auflösungen und Pixeldichten.
Code: Dynamische Änderung der Anordnung und Größe der Elemente basierend auf den Eigenschaften des Geräts, die programmatisch ermittelt werden.

Daher sind Medienabfragen wichtig für WebViews und Progressive Web Apps (PWA), die in einer mobilen Browser-Umgebung laufen, aber nicht die Grundlage für die Anpassungsfähigkeit in rein nativen mobilen Anwendungen.

Wie funktionieren Media-Queries im Kontext mobiler Anwendungen?