Kā darbojas mediju pieprasījumi mobilajās…

Mediju pieprasījumi mobilajās lietojumprogrammās tieši netiek izmantoti nativu UI komponentu stilizēšanai. Tie ir CSS daļa un tiek piemēroti, lai pielāgotu tīmekļa saturu, kas tiek rādīts WebView vai pārlūkprogrammā mobilajā ierīcē.

Darba princips mobilajā kontekstā (tīmekļa satura WebView/pārlūkprogrammā):

Tīmekļa lapa tiek ielādēta WebView vai mobilajā pārlūkprogrammā.
Pārlūkprogramma/WebView nosaka ierīces vai loga raksturlielumus:
- Ekrāna platumu un augstumu (width, height, min-width, max-height utt.)
- Orientāciju (orientation: portrait vai landscape)
- Izšķirtspēju (resolution)
- Ierīces tipu (media type, piemēram, screen)
- Citas raksturlielumus (piemēram, prefers-color-scheme).
CSS parsētājs analizē stilus, ieskaitot mediju pieprasījumus.
@media bloku CSS noteikumi tiek piemēroti tikai tad, ja mediju pieprasījuma nosacījumi atbilst pašreizējām ierīces/loga raksturlielumiem.

Piemērs lietošanai:

/* Visu izmēru galvenie stili */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Pielāgojas ekrāniem ar platumu līdz 768px (parasti mobilajiem/tabletiem) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* piemērs izkārtojuma maiņai */
  }
}

/* Pielāgojas ekrāniem ar platumu no 769px un vairāk (parasti planšetēm/datoriem) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* rādīt sānu joslu lieliem ekrāniem */
  }
}

/* Pielāgojas horizontālai orientācijai */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Nativās mobilās lietojumprogrammās pielāgošana tiek panākta ar citām mehānismiem:

Nativās UI ietvari: (piemēram, Auto Layout iOS, ConstraintLayout Android) ļauj aprakstīt attiecības starp UI elementiem, kas pielāgojas ekrāna izmēram un orientācijai.
Ierīces izmēri un pikseļu blīvums: izstrādātāji izmanto dažādus resursus (piemēram, drawable resursus Android, aktīvus iOS) dažādām izšķirtspējām un blīvumiem.
Kods: dinamiski maina elementu izvietojumu un izmēru atkarībā no ierīces īpašībām, kas iegūtas programmatiski.

Tādējādi, mediju pieprasījumi ir svarīgi webViews un progressive web applications (PWA), kas darbojas mobilās pārlūkprogrammas vidē, bet nav galvenais mehānisms nativu mobilās lietojumprogrammu pielāgošanai.

Kā darbojas mediju pieprasījumi mobilajās lietojumprogrammās?