Kaip veikia medijos užklausos mobiliųjų programėlių kontekste?

Medijos užklausos mobiliosiose programose tiesiogiai nenaudojamos nativinių UI komponentų stiliui. Jos yra CSS dalis ir taikomos adaptuojant interneto turinį, rodomą WebView arba naršyklėje mobiliajame įrenginyje.

Veikimo principas mobiliojoje aplinkoje (interneto turinio WebView/naršyklėje):

1. Interneto puslapis įkeliamas į WebView arba mobilųjį naršyklį.
2. Naršyklė/WebView nustato įrenginio arba lango charakteristikas:
   • Ekrano plotį ir aukštį (width, height, min-width, max-height ir kt.)
   • Orientaciją (orientation: portrait arba landscape)
   • Rezoliuciją (resolution)
   • Įrenginio tipą (media type, pvz., screen)
   • Kitas charakteristikas (pvz., prefers-color-scheme).
3. CSS analizatorius analizuoja stilius, įskaitant medijos užklausas.
4. @media blokų CSS taisyklės taikomos tik jei medijos užklausos sąlygos atitinka dabartines įrenginio/lango charakteristikas.

Pavyzdys naudojimo:

/* Pagrindiniai stiliai visiems dydžiams */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Taikoma iki 768px pločio ekranams (tipiška mobiliesiems / planšetėms) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Pavyzdys keisti maketą */
  }
}

/* Taikoma nuo 769px pločio ekranams (tipiška planšetėms / darbalaukio) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Rodyti šoninę juostą dideliuose ekranuose */
  }
}

/* Taikoma peizažo režimu */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Nativiose mobiliųjų programų aplinkose adaptacija pasiekiama kitais mechanizmais:

• Nativūs UI karkasai: (pvz., Auto Layout iOS, ConstraintLayout Android) leidžia aprašyti santykius tarp UI elementų, kurie prisitaiko prie ekrano dydžio ir orientacijos.
• Įrenginio dydžiai ir taškų tankis: kūrėjai naudoja skirtingus išteklius (pvz., drawable išteklius Android, assetus iOS) skirtingiems rezoliucijoms ir taškų tankiams.
• Kodas: dinamiškai keičia elementų išdėstymą ir dydį priklausomai nuo įrenginio savybių, gautų programiškai.

Taigi, medijos užklausos yra svarbios webViews ir progressive web applications (PWA), kurios veikia mobiliosios naršyklės aplinkoje, tačiau nėra pagrindinis mechanizmas nativios mobiliosios programėlės adaptacijai.