Como funcionam as media queries no contexto de aplicações móveis?

As consultas de media no contexto de aplicações móveis não são usadas diretamente para estilizar componentes de UI nativos. Elas fazem parte do CSS e são usadas para o design responsivo do conteúdo web exibido dentro de WebView ou num navegador num dispositivo móvel.

Princípio de funcionamento no contexto móvel (para conteúdo web em WebView/navegador):

1. A página web é carregada no WebView ou no navegador móvel.
2. O navegador/WebView determina as características do dispositivo ou da janela de visualização:
   • Largura e altura do ecrã (width, height, min-width, max-height, etc.)
   • Orientação (orientation: portrait ou landscape)
   • Resolução (resolution)
   • Tipo de dispositivo (media type, por exemplo, screen)
   • Outras características (por exemplo, prefers-color-scheme).
3. O analisador CSS analisa os estilos, incluindo as consultas de media.
4. As regras CSS dentro dos blocos @media só se aplicam se as condições da consulta de media corresponderem às características atuais do dispositivo/janela.

Exemplo de uso:

/* Estilos básicos para todos os tamanhos */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Aplica-se em ecrãs com até 768px de largura (tipicamente para dispositivos móveis/tablets) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Exemplo de alteração de layout */
  }
}

/* Aplica-se em ecrãs com mais de 769px de largura (tipicamente para tablets/desktops) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Mostrar barra lateral em ecrãs grandes */
  }
}

/* Aplica-se na orientação paisagem */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

Em aplicações móveis nativas, a adaptabilidade é alcançada por outros mecanismos:

• Frameworks de UI nativos: (por exemplo, Auto Layout no iOS, ConstraintLayout no Android) permitem descrever relações entre elementos de UI que se adaptam ao tamanho e orientação do ecrã.
• Tamanhos de dispositivos e densidade de pixels: Os desenvolvedores usam diferentes recursos (por exemplo, recursos drawable no Android, assets no iOS) para diferentes resoluções e densidades de ecrã.
• Código: alteração dinâmica do posicionamento e tamanho dos elementos consoante as propriedades do dispositivo, obtidas programaticamente.

Assim, as consultas de media são importantes para WebViews e Progressive Web Apps (PWA) que funcionam num ambiente de navegador móvel, mas não são a base da adaptabilidade em aplicações móveis nativas puras.