Mobil uygulamalarında medya sorguları nasıl çalışır…

Mobil uygulamalar bağlamında medya sorguları doğrudan yerel UI bileşenlerinin stilizasyonu için kullanılmaz. Bunlar CSS'in bir parçasıdır ve WebView veya mobil cihazdaki tarayıcı içinde gösterilen web içeriğinin duyarlı tasarımı için kullanılır.

Mobil bağlamda çalışma prensibi (WebView/tarayıcı içindeki web içeriği için):

Web sayfası WebView veya mobil tarayıcıya yüklenir.
Tarayıcı/WebView cihaz veya görüntüleme penceresinin özelliklerini belirler:
- Ekran genişliği ve yüksekliği (width, height, min-width, max-height vb.)
- Yönlendirme (orientation: portrait veya landscape)
- Çözünürlük (resolution)
- Cihaz tipi (media type, örneğin screen)
- Diğer özellikler (örneğin, prefers-color-scheme).
CSS ayrıştırıcı, medya sorguları dahil olmak üzere stilleri analiz eder.
@media blokları içindeki CSS kuralları, medya sorgusunun koşulları cihazın/mevcut pencere özellikleriyle uyumluysa uygulanır.

Kullanım örneği:

/* Tüm boyutlar için temel stiller */
.container {
  width: 90%;
  margin: 0 auto;
}

/* 768px genişliğe kadar ekranlarda uygulanır (mobil/tablet için tipik) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Düzeni değiştirme örneği */
  }
}

/* 769px ve üzeri genişlikte ekranlarda uygulanır (tablet/masaüstü için tipik) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Büyük ekranlarda yan menüyü göster */
  }
}

/* Yatay modda uygulanır */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Yerel mobil uygulamalarda uyum sağlama, diğer mekanizmalarla elde edilir:

Yerel UI çerçeveleri: (örneğin, iOS'ta Auto Layout, Android'de ConstraintLayout) ekran boyutu ve yönüne uyum sağlayan UI öğeleri arasındaki ilişkileri tanımlamaya olanak tanır.
Cihaz boyutları ve piksel yoğunluğu: Geliştiriciler, farklı çözünürlükler ve ekran yoğunlukları için farklı kaynaklar (örneğin, Android'de drawable kaynakları, iOS'ta varlıklar) kullanır.
Kod: Cihaz özelliklerine göre dinamik olarak düzen ve boyut değiştirme, programatik olarak elde edilir.

Bu nedenle, medya sorguları, WebView ve Progressive Web Apps (PWA) gibi mobil tarayıcı ortamında çalışan uygulamalar için önemlidir, ancak saf yerel mobil uygulamalarda temel değildir.

Mobil uygulamalarında medya sorguları nasıl çalışır?