Hoe werken media queries in de context van mobiele…

Media queries in de context van mobiele applicaties worden niet direct gebruikt voor het stylen van native UI-componenten. Ze maken deel uit van CSS en worden toegepast voor responsief webdesign van webinhoud die binnen WebView of een browser op een mobiel apparaat wordt weergegeven.

Werkingprincipe in de mobiele context (voor webinhoud in WebView/browser):

De webpagina wordt geladen in WebView of mobiele browser.
De browser/WebView bepaalt de kenmerken van het apparaat of het weergavevenster:
- Breedte en hoogte van het scherm (width, height, min-width, max-height, etc.)
- Oriëntatie (orientation: portrait of landscape)
- Resolutie (resolution)
- Apparaten type (media type, bijvoorbeeld screen)
- Andere kenmerken (bijvoorbeeld prefers-color-scheme).
De CSS-parser analyseert de stijlen, inclusief media queries.
CSS-regels binnen @media-blokken worden alleen toegepast als de voorwaarden van de media query overeenkomen met de huidige kenmerken van het apparaat/de venster.

Voorbeeld van gebruik:

/* Basisstijlen voor alle maten */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Toegepast op schermen tot 768px breed (typisch voor mobiel/tablet) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Voorbeeld van lay-out wijziging */
  }
}

/* Toegepast op schermen vanaf 769px breed (typisch voor tablets/desktops) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Sidebar tonen op grote schermen */
  }
}

/* Toegepast in landschap modus */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

In native mobiele applicaties wordt de responsiviteit bereikt door andere mechanismen:

Native UI-frameworks: (bijvoorbeeld Auto Layout in iOS, ConstraintLayout in Android) maken het mogelijk om relaties tussen UI-elementen te beschrijven die zich aanpassen aan de grootte en oriëntatie van het scherm.
Apparaatgroottes en pixelsdichtheid: Ontwikkelaars gebruiken verschillende resources (bijvoorbeeld drawable resources in Android, assets in iOS) voor verschillende resoluties en dichtheden.
Code: Dynamische wijziging van de positie en grootte van elementen afhankelijk van de eigenschappen van het apparaat, verkregen via programmeren.

Daarom zijn media queries belangrijk voor WebViews en Progressive Web Apps (PWA) die in een mobiele browseromgeving werken, maar vormen ze niet de basis voor responsiviteit in puur native mobiele applicaties.

Hoe werken media queries in de context van mobiele applicaties?