Kuidas töötavad meedia päringud mobiilirakenduste kontekstis?

Meedia-päringud mobiilirakendustes ei ole otseselt kasutusel natiivsete UI-komponentide stiilimiseks. Need on osa CSS-st ning neid kasutatakse veebisisu reageerivaks kujundamiseks, mis kuvatakse WebView või brauseris mobiilseadmes.

Tööpõhimõte mobiilse kontekstis (veebisisu WebView/brauseri jaoks):

1. Veebileht laaditakse WebView või mobiilse brauseri kaudu.
2. Brauser/WebView määrab seadme või akna omadused:
   • Ekraani laius ja kõrgus (width, height, min-width, max-height jms)
   • Orientatsioon (orientation: portrait või landscape)
   • Resolutsioon (resolution)
   • Seadme tüüp (media type, näiteks screen)
   • Muud omadused (näiteks prefers-color-scheme).
3. CSS-parsija analüüsib stiile, sealhulgas meedia-päringuid.
4. @media blokkides olevad CSS reeglid rakenduvad ainult juhul, kui meedia-päringu tingimused vastavad praegustele seadme/akna omadustele.

Näide kasutusest:

/* Põhistiilid kõigile suurustele */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Rakendub ekraanidel kuni 768px laiusega (tüüpiline mobiilidele/ tahvlitele) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* näide paigutuse muutmisest */
  }
}

/* Rakendub ekraanidel alates 769px laiusega (tüüpiline tahvlitele/detskopidele) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* külgriba näitamine suurematel ekraanidel */
  }
}

/* Rakendub horisontaalses orientatsioonis */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Natiivsetes mobiilirakendustes saavutatakse kohanduvus muude mehhanismide abil:

• Natiivsed UI raamistikud: (näiteks Auto Layout iOS-is, ConstraintLayout Android-is) võimaldavad kirjeldada UI elementide suhteid, mis kohanduvad ekraani suuruse ja orientatsiooniga.
• Seadme suurused ja pikslitihedus: arendajad kasutavad erinevaid ressursse (näiteks drawable ressursid Android-is, ressursid iOS-is) erinevate resolutsioonide ja pikslitiheduse jaoks.
• Kood: dünaamiliselt muudetakse elementide asukohta ja suurust vastavalt seadme omadustele, mis saadakse programmatiselt.

Seega on meedia-päringud olulised webViews ja progressive web applications (PWA), mis töötavad mobiilse brauseri keskkonnas, kuid ei ole peamine mehhanism natiivsete mobiilirakenduste kohandamiseks.