CSS @media handheld Suporte em navegadores iPhone e Android

Em um esforço para personalizar páginas da web para navegadores móveis, os desenvolvedores podem tentar usar Consultas portáteis CSS @media para alterar a aparência da página. No entanto, algumas plataformas, como o iPhone via Safari, desconsideram essa abordagem.

Abordagem Alternativa para iPhone e Android

Para resolver essa limitação, a solução recomendada é empregar consultas de mídia que especificam características específicas do dispositivo. O código a seguir demonstra a segmentação do iPhone (ou qualquer dispositivo com largura de tela de 480 px ou menos):

Segmentando dispositivos com resoluções mais altas

Conforme observado, dispositivos como o Droid X têm resoluções mais altas que podem não ser detectado pela consulta acima mencionada. Para direcionar esses dispositivos, as consultas de mídia podem inspecionar as características físicas do dispositivo, como resolução:

Recursos Adicionais

Mais informações podem ser encontradas nos artigos A List Apart fornecidos e a recomendação W3 para consultas de mídia.