La mediafunción de consulta CSS3 ha dado lugar a muchas posibilidades interesantes en términos de desarrollo de sitios web que se ajustan a diferentes tamaños de pantalla y dispositivos.
Sin embargo, en la práctica, estoy empezando a tener la sensación de que la mediafunción de consulta CSS3 y todo el movimiento "Diseño web receptivo" pueden no cumplir con su promesa.
El problema que veo es que, al final del día, los desarrolladores web se preocupan principalmente por si sus usuarios están viendo contenido a través de una computadora de escritorio, tableta o dispositivo móvil. Pero CSS3 solo proporciona un medio para detectar la resolución de pantalla . En teoría, la detección de la resolución de la pantalla parece una excelente manera de ajustarse para varios dispositivos diferentes. Pero en la práctica ...
Supongamos que tenemos una función Javascript simple que solo muestra el ancho de la pantalla:
function foo()
{
alert(screen.width);
}
En mi Blackberry Touch, esto genera:
768En mi Samsung Galaxy, esto genera:
800Entonces ... en este punto, la resolución de los teléfonos inteligentes convencionales se está acercando bastante a las resoluciones de nivel de escritorio. La capacidad de detectar si un usuario está viendo su sitio web a través de un teléfono inteligente, tableta o computadora de escritorio, parece ser cada vez más difícil si lo único que busca es la resolución de pantalla.
Esto me hace cuestionar toda la sabiduría detrás de todo el movimiento CSS3 "Diseño web receptivo" basado en consultas de medios. Casi parece que la mediafunción de consulta es más adecuada para adaptarse a una ventana de navegador de cambio de tamaño en una pantalla de escritorio, en lugar de varios dispositivos móviles.
Otra posible técnica para detectar dispositivos móviles o tabletas es utilizar la detección de funciones, verificando si el ontouchstartevento es compatible. Pero incluso esto se está volviendo poco confiable a medida que muchas pantallas de escritorio comienzan a admitir el tacto.
Pregunta: Entonces, como desarrollador web, si no puedo confiar en RWD o en la detección de funciones, ¿es el rastreo de agente de usuario (tan notoriamente poco confiable como siempre) realmente la mejor opción para detectar dispositivos móviles?
fuente
device-widthbastante malo?Respuestas:
Deja de preocuparte tanto por dispositivos específicos.
Se está volviendo cada vez más difícil de detectar mediante resolución de la pantalla, y sólo será más difícil a medida que más dispositivos entran en el mercado, pero el propósito de preguntas de los medios no es para detectar dispositivo types.What preguntas de los medios son buenos en lo que se ajustes a su diseño cuando ya no es agradable de usar en las dimensiones actuales. Si el sitio comienza a desmoronarse a 550 px de ancho, entonces no importa si hay un dispositivo con esas dimensiones o no: configura el punto de interrupción allí.
Es el mismo trato con la detección de características. Si el dispositivo admite la función táctil, ¿qué importa si se trata de un dispositivo móvil o de un monitor de pared futuro? De cualquier manera, las mejoras táctiles probablemente serán útiles.
La detección de agentes de usuario, como usted ha dicho, es completamente poco confiable. Podría cambiar mi cadena de agente de usuario a citas de Shakespeare si realmente también quisiera. ¿Qué decidiría entonces su sitio sobre mi navegador?
Los agentes de usuario también requieren mucho trabajo para manejar todas las posibilidades. ¿Tienes uno para Firefox en Android? Chrome en iOS? Delfín en Froyo? El navegador WiiU? ¿El navegador extremadamente limitado en mi antiguo teléfono con función LG? ¿Lince? IE 13? ¿Enlaces? IceWeasel? ¿El navegador del libro de jugadas de Blackberry? ¿Cómo está diferenciando entre Opera que se ejecuta en una tableta y Opera que se ejecuta en un teléfono?
Esta lista solo puede crecer a medida que pasa el tiempo.
fuente
Los agentes usuarios también mienten. Si buscas en Google, encontrarás listas de agentes de usuario frente a la realidad. Entonces esto es un problema. Algunos recurren a mirar la configuración de dpi para determinar qué o qué tipo de dispositivo es.
fuente