Ajustar CSS para dispositivos móviles: comprender las limitaciones del dispositivo portátil @media

Al intentar personalizar CSS específicamente para navegadores móviles como iPhone y Android, es esencial tener en cuenta las limitaciones del dispositivo portátil @media. Si bien este tipo de consulta de medios se ha utilizado en el pasado, no es universalmente compatible con dispositivos móviles, especialmente aquellos con capacidades de visualización avanzadas.

Para lograr el efecto deseado, considere enfoques alternativos:

Usar Consultas de pantalla @media

En lugar de la computadora de mano @media, utilice consultas de pantalla @media. Estas consultas le permiten apuntar a dispositivos según características específicas de la pantalla, como la resolución y el ancho del dispositivo. Por ejemplo, para diseñar una página web para un iPhone:

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

Aprovechamiento de las consultas de funciones CSS

Alternativamente, las consultas de funciones CSS se pueden utilizar para detectar capacidades específicas del navegador. Por ejemplo, para verificar si se admiten consultas de medios:

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

Apuntar a la resolución del dispositivo

Para apuntar a dispositivos con resoluciones específicas, las consultas @media se pueden combinar con la función de resolución de medios:

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

Más recursos

• [Recomendación de candidatos del W3C para consultas de medios](https://www.w3.org/TR/css3-mediaqueries/)
• [Desarrollador de Webkit móvil de Apple Guía](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [Una lista aparte: diseño para múltiples ventanas gráficas](https: //alistapart.com/article/viewports)