Mobil ilovalarda media so'rovlar qanday ishlaydi…

Mobil ilovalarda kontekstida media so‘rovlar to‘g‘ridan-to‘g‘ri nativ UI komponentlarini uslublash uchun ishlatilmaydi. Ular CSS ning bir qismidir va WebView yoki mobil qurilma brauzerida ko‘rsatiladigan veb-mazmunning moslashuvchan dizayni uchun qo‘llaniladi.

Mobil kontekstda ishlash prinsipi (WebView/brauzer uchun veb-mazmun):

Veb-sahifa WebView yoki mobil brauzerga yuklanadi.
Brauzer/WebView qurilma yoki ko‘rish oynasining xususiyatlarini aniqlaydi:
- Ekran kengligi va balandligi (width, height, min-width, max-height va boshqalar)
- Orientatsiya (orientation: portrait yoki landscape)
- Resolutsiya (resolution)
- Qurilma turi (media type, masalan, screen)
- Boshqa xususiyatlar (masalan, prefers-color-scheme).
CSS tahlilchi uslublarni, jumladan media so‘rovlarni, tahlil qiladi.
@media bloklari ichidagi CSS qoidalari faqat media so‘rov shartlari qurilma yoki oynaning hozirgi xususiyatlariga mos kelganda qo‘llaniladi.

Foydalanish misoli:

/* Barcha o‘lchamlar uchun asosiy uslublar */
.container {
  width: 90%;
  margin: 0 auto;
}

/* 768px gacha kenglikdagi ekranlarda qo‘llaniladi (mobil/planşet uchun odatiy) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Maket o‘zgartirish misoli */
  }
}

/* 769px va undan katta kenglikdagi ekranlarda qo‘llaniladi (planşet/desktop uchun odatiy) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Katta ekranlarda yon panelni ko‘rsatish */
  }
}

/* Landshaft orientatsiyada qo‘llaniladi */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Nativ mobil ilovalarda moslashuvchanlik boshqa mexanizmlar yordamida amalga oshiriladi:

Nativ UI freymvorklari: (masalan, iOSda Auto Layout, Androidda ConstraintLayout) ekran o‘lchami va orientatsiyasiga mos keladigan UI elementlari o‘rtasidagi munosabatlarni tavsiflash imkonini beradi.
Qurilma o‘lchamlari va piksellar zichligi: Dasturchilar turli ekran o‘lchamlari va zichliklari uchun turli resurslar (masalan, Androidda drawable resurslar, iOSda assets) ishlatadilar.
Kod: qurilma xususiyatlariga qarab elementlarning joylashuvi va o‘lchamini dinamik o‘zgartirish, dasturiy ravishda olinadi.

Shuning uchun, media so‘rovlar WebViews va Progressive Web Apps (PWA) uchun muhim bo‘lib, ular mobil brauzer muhitida ishlaydi, ammo to‘g‘ridan-to‘g‘ri nativ mobil ilovalarda asosiy bo‘lmaydi.

Mobil ilovalarda media so'rovlar qanday ishlaydi?