Come funzionano le media query nel contesto delle applicazioni mobili?

Le query media nel contesto delle applicazioni mobili non vengono utilizzate direttamente per stilizzare i componenti UI nativi. Sono parte di CSS e vengono applicate per il design reattivo del contenuto web visualizzato all’interno di WebView o di un browser su un dispositivo mobile.

Principio di funzionamento nel contesto mobile (per contenuti web in WebView/browser):

1. La pagina web viene caricata in WebView o nel browser mobile.
2. Il browser/WebView determina le caratteristiche del dispositivo o della finestra di visualizzazione:
   • Larghezza e altezza dello schermo (width, height, min-width, max-height, ecc.)
   • Orientamento (orientation: portrait o landscape)
   • Risoluzione (resolution)
   • Tipo di dispositivo (media type, ad esempio, screen)
   • Altre caratteristiche (ad esempio, prefers-color-scheme).
3. Il parser CSS analizza gli stili, incluse le query media.
4. Le regole CSS all’interno dei blocchi @media vengono applicate solo se le condizioni della query media corrispondono alle caratteristiche attuali del dispositivo/finestra.

Esempio di utilizzo:

/* Stili di base per tutte le dimensioni */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Applicato su schermi fino a 768px di larghezza (tipico per mobile/tablet) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Esempio di modifica del layout */
  }
}

/* Applicato su schermi con larghezza superiore a 769px (tipico per tablet/desktop) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Mostrare la barra laterale su schermi grandi */
  }
}

/* Applicato in modalità landscape */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Nelle applicazioni mobili native, l’adattamento si ottiene tramite altri meccanismi:

• Framework UI nativi: (ad esempio, Auto Layout in iOS, ConstraintLayout in Android) permettono di descrivere le relazioni tra gli elementi UI che si adattano alle dimensioni e all’orientamento dello schermo.
• Dimensioni dei dispositivi e densità di pixel: Gli sviluppatori usano risorse diverse (ad esempio, risorse drawable in Android, assets in iOS) per diverse risoluzioni e densità dello schermo.
• Codice: modifica dinamica della disposizione e delle dimensioni degli elementi in base alle proprietà del dispositivo, ottenute programmaticamente.

Pertanto, le query media sono importanti per WebViews e Progressive Web Apps (PWA) che funzionano in ambienti di browser mobili, ma non sono alla base dell’adattamento nelle applicazioni mobili native pure.