Cum funcționează media-queries în contextul…

Interogările media în contextul aplicațiilor mobile nu sunt utilizate direct pentru stilizarea componentelor native UI. Ele fac parte din CSS și sunt utilizate pentru designul adaptiv al conținutului web afișat în WebView sau într-un browser pe dispozitivul mobil.

Principiul de funcționare în contextul mobil (pentru conținut web în WebView/browser):

Pagina web se încarcă în WebView sau în browserul mobil.
Browserul/WebView determină caracteristicile dispozitivului sau ale ferestrei de vizualizare:
- Lățimea și înălțimea ecranului (width, height, min-width, max-height etc.)
- Orientarea (orientation: portrait sau landscape)
- Rezoluția (resolution)
- Tipul dispozitivului (media type, de exemplu, screen)
- Alte caracteristici (de exemplu, prefers-color-scheme).
Parserul CSS analizează stilurile, inclusiv interogările media.
Reguli CSS din blocurile @media se aplică numai dacă condițiile interogării media corespund caracteristicilor actuale ale dispozitivului/ferestrei.

Exemplu de utilizare:

/* Stiluri de bază pentru toate dimensiunile */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Se aplică pe ecrane cu lățimea până la 768px (tipic pentru mobile/tablet) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Exemplu de schimbare a aspectului */
  }
}

/* Se aplică pe ecrane cu lățimea de la 769px în sus (tipic pentru tabletă/desktop) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Afișează bara laterală pe ecrane mari */
  }
}

/* Se aplică în modul peisaj */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

În aplicațiile mobile native, adaptabilitatea se realizează prin alte mecanisme:

Framework-uri UI native: (de exemplu, Auto Layout în iOS, ConstraintLayout în Android) permit descrierea relațiilor dintre elementele UI care se adaptează la dimensiunea și orientarea ecranului.
Dimensiunile dispozitivelor și densitatea pixelilor: Dezvoltatorii folosesc diferite resurse (de exemplu, resurse drawable în Android, assets în iOS) pentru diferite rezoluții și densități de ecran.
Cod: modificarea dinamică a poziției și dimensiunii elementelor în funcție de proprietățile dispozitivului, obținute programatic.

Prin urmare, interogările media sunt importante pentru WebViews și Progressive Web Apps (PWA) care funcționează în mediul browserului mobil, dar nu sunt fundamentul adaptabilității în aplicațiile mobile native pure.

Cum funcționează media-queries în contextul aplicațiilor mobile?