Ajustando CSS para dispositivos móveis: entendendo as limitações do dispositivo portátil @media

Ao tentar personalizar CSS especificamente para navegadores móveis como iPhone e Android, é essencial estar ciente dos limitações do dispositivo portátil @media. Embora esse tipo de consulta de mídia tenha sido usado no passado, ele não é universalmente compatível com dispositivos móveis, especialmente aqueles com recursos avançados de exibição.

Para obter o efeito desejado, considere abordagens alternativas:

Usando Consultas de tela @media

Em vez do dispositivo portátil @media, use consultas de tela @media. Essas consultas permitem segmentar dispositivos com base em características específicas da tela, como resolução e largura do dispositivo. Por exemplo, para estilizar uma página da Web para um iPhone:

@media screen and (max-device-width: 480px) {
  body {
    color: red;
  }
}

Aproveitando consultas de recursos CSS

Como alternativa, consultas de recursos CSS podem ser usadas para detectar recursos específicos do navegador. Por exemplo, para verificar se as consultas de mídia são suportadas:

@supports (media) {
  /* Styles to be applied if media queries are supported */
}

Segmentação da resolução do dispositivo

Para segmentar dispositivos com resoluções específicas, as consultas @media podem ser combinadas com o recurso de mídia de resolução:

@media screen and (max-device-width: 480px) and (resolution: 163dpi) {
  body {
    color: blue;
  }
}

Recursos adicionais

• [Recomendação de candidato do W3C para consultas de mídia](https://www.w3.org/TR/css3-mediaqueries/)
• [Desenvolvedor de Webkit móvel da Apple Guia](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [Uma lista à parte: projetando para múltiplas viewports](https: //alistapart.com/article/viewports)