Mobil tətbiqlərdə media sorğuları necə işləyir…

Mobil tətbiqlər kontekstində media sorğuları birbaşa yerli UI komponentlərinin stilizasiyası üçün istifadə edilmir. Onlar CSS-in bir hissəsidir və WebView və ya mobil cihazda brauzer daxilində göstərilən veb məzmununun cavabdeh dizaynı üçün tətbiq olunur.

Mobil kontekstində işləmə prinsipi (WebView/brauzer üçün veb məzmun):

Veb səhifə WebView və ya mobil brauzerə yüklənir.
Brauzer/WebView cihaz və ya görüntü pəncərəsinin xüsusiyyətlərini müəyyən edir:
- Ekranın eni və hündürlüyü (width, height, min-width, max-height və s.)
- Yönləndirmə (orientation: portrait və ya landscape)
- Həll (resolution)
- Cihaz tipi (media type, məsələn, screen)
- Digər xüsusiyyətlər (məsələn, prefers-color-scheme).
CSS parseri stilləri, o cümlədən media sorğularını analiz edir.
@media blokları içindəki CSS qaydaları yalnız media sorğusunun şərtləri cihazın və ya pəncərənin hazırkı xüsusiyyətlərinə uyğun gəldikdə tətbiq olunur.

İstifadə nümunəsi:

/* Bütün ölçülər üçün əsas stillər */
.container {
  width: 90%;
  margin: 0 auto;
}

/* 768px-ə qədər genişlikdə ekranlarda tətbiq olunur (mobil/tablet üçün tipik) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Layout dəyişiklik nümunəsi */
  }
}

/* 769px və yuxarı genişlikdə ekranlarda tətbiq olunur (tablet/desktop üçün tipik) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Böyük ekranlarda yan paneli göstər */
  }
}

/* Yatay orientasiya üçün tətbiq olunur */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Nativ mobil tətbiqlərdə uyğunlaşma digər mexanizmlər vasitəsilə əldə edilir:

Nativ UI çərçivələri: (məsələn, iOS-də Auto Layout, Android-də ConstraintLayout) ekranın ölçüsü və yönümünə uyğun UI elementləri arasındakı münasibətləri təsvir etməyə imkan verir.
Cihazların ölçüləri və piksellərin sıxlığı: İnkişaf etdiricilər müxtəlif həll və sıxlıqlar üçün müxtəlif resurslar (məsələn, Android-də drawable resursları, iOS-də assets) istifadə edir.
Kod: cihazın xüsusiyyətlərinə əsasən elementlərin yerləşdirilməsi və ölçüsünün dinamik dəyişdirilməsi, proqram vasitəsilə əldə edilir.

Nəticədə, media sorğuları WebViews və Progressive Web Apps (PWA) üçün vacibdir, çünki onlar mobil brauzer mühitində işləyir, lakin saf nativ mobil tətbiqlərdə əsas deyil.

Mobil tətbiqlərdə media sorğuları necə işləyir?