Compatibilidad con CSS @media portátil en navegadores iPhone y Android

En un esfuerzo por adaptar las páginas web a los navegadores móviles, los desarrolladores pueden intentar utilizar Consultas portátiles CSS @media para alterar la apariencia de la página. Sin embargo, algunas plataformas, como el iPhone a través de Safari, ignoran este enfoque.

Enfoque alternativo para iPhone y Android

Para abordar esta limitación, la solución recomendada es emplear consultas de medios que especifican características específicas del dispositivo. El siguiente código demuestra cómo apuntar al iPhone (o cualquier dispositivo con un ancho de pantalla de 480 px o menos):

Apuntar a dispositivos con resoluciones más altas

Como se señaló, dispositivos como el Droid X tienen resoluciones más altas que pueden no ser detectado por la consulta antes mencionada. Para apuntar a dichos dispositivos, las consultas de medios pueden inspeccionar las características físicas del dispositivo, como la resolución:

Recursos adicionales

Puede encontrar más información en los artículos proporcionados por A List Apart y la Recomendación W3 para consultas de medios.