Kako funkcionišu medijski upiti u kontekstu mobilnih…

Mediji upiti u kontekstu mobilnih aplikacija se direktno ne koriste za stilizovanje nativnih UI komponenti. Oni su deo od CSS-a i primenjuju se za adaptivno prikazivanje web sadržaja unutar WebView ili pregledača na mobilnom uređaju.

Princip rada u mobilnom kontekstu (za web sadržaj u WebView/pregledaču):

Web stranica se učitava u WebView ili mobilni pregledač.
Pregledač/WebView određuje karakteristike uređaja ili prozora:
- Širina i visina ekrana (width, height, min-width, max-height itd.)
- Orijentacija (orientation: portrait ili landscape)
- Rezolucija (resolution)
- Tip uređaja (media type, na primer screen)
- Druge karakteristike (na primer prefers-color-scheme).
CSS parser analizira stilove, uključujući medijske upite.
CSS pravila unutar @media blokova se primenjuju samo ako uslovi medijskog upita odgovaraju trenutnim karakteristikama uređaja/prozora.

Primer upotrebe:

/* Osnovni stilovi za sve veličine */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Primjenjuje se na ekranima do 768px širine (tipično za mobilne/tablete) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Primer promene rasporeda */
  }
}

/* Primjenjuje se na ekranima širine od 769px nadalje (tipično za tablete/desktove) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Prikaz bočne trake na većim ekranima */
  }
}

/* Primjenjuje se u pejzažnoj orijentaciji */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

U nativnim mobilnim aplikacijama adaptivnost se postiže drugim mehanizmima:

Nativni UI okviri: (npr. Auto Layout u iOS, ConstraintLayout u Androidu) omogućavaju opisivanje odnosa između UI elemenata koji se prilagođavaju veličini i orijentaciji ekrana.
Veličine uređaja i gustina piksela: Programeri koriste različite resurse (npr. drawable resurse u Androidu, assete u iOS-u) za različite rezolucije i gustine displeja.
Kod: Dinamičko menjanje rasporeda i veličine elemenata u zavisnosti od svojstava uređaja, dobijenih programatski.

Tako, medijski upiti su važni za webView-ove i progresivne web aplikacije (PWA) koje rade u okruženju mobilnog pregledača, ali nisu osnovni mehanizam za adaptivnost u čistim nativnim mobilnim aplikacijama.

Kako funkcionišu medijski upiti u kontekstu mobilnih aplikacija?