Diseño web receptivo versus detección de agente de usuario


13

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:

768

En mi Samsung Galaxy, esto genera:

800

Entonces ... 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?


Si el objetivo de Responsive Web Design es (como afirma Wikipedia ) "fácil lectura y navegación con un mínimo de cambio de tamaño, desplazamiento y desplazamiento", entonces ¿por qué le importa si es una computadora de escritorio o un dispositivo móvil? Lo que importa es la resolución y el tamaño de la pantalla del dispositivo, no el tipo de dispositivo que es. ¿No?
ruakh

Supongo que lo que digo es que la conexión entre la "resolución de pantalla" y el tamaño real de la pantalla (por ejemplo, centímetros / pulgadas de ancho de pantalla) se está volviendo cada vez más transitoria.
Channel72

Pensé que se suponía que debías hacer algo con la consulta de medios del ancho del dispositivo porque el ancho / resolución se está volviendo cada vez más impreciso, especialmente con la densidad de píxeles de varias pantallas, por ejemplo, los dispositivos "Retina" de Apple. Entonces, si el ancho del dispositivo está dentro del ancho general de un dispositivo móvil, entonces muestra un diseño diferente. Para un usuario de tableta / escritorio, solo muestro el mismo diseño, es decir, 1024 px de ancho.
zuallauz

@zuallauz, ¿no es el soporte device-widthbastante malo?
Canal72

¿Por qué no ir por unidades em? De esa manera, el contenido cambia según el espacio de texto disponible ...

Respuestas:


12

Deja de preocuparte tanto por dispositivos específicos.

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

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.


Bueno, un diseño de 1 columna generalmente se presta bien a los teléfonos inteligentes. Para una tableta, puede escaparse con un diseño de 2 columnas o incluso de 3 columnas, y para escritorios, generalmente 3 columnas funcionan bien. En cualquier caso, el número ideal de columnas que muestra es típicamente una función de las capacidades biológicas del ojo humano , en lugar de la resolución de la pantalla. Mi punto es que sería bueno si hubiera una correlación más estricta entre la resolución de pantalla y la probabilidad de que un humano típico pueda escanear fácilmente su sitio visualmente. Al menos, CSS3 parece asumir tal correlación.
Canal72

1
Se supone que debe haber, en realidad. Se supone que los píxeles CSS se definen utilizando ángulos y distancias, no píxeles físicos. Sin embargo, muchos fabricantes ignoran esto en su configuración predeterminada.
Mike Gossmann

@ Channel72 Un diseño de 1 columna se presta bien a cualquier ancho de pantalla estrecho . No importa si el ancho de la pantalla es estrecho porque es un navegador de teléfono inteligente o un navegador de escritorio en una ventana redimensionada en un monitor gigante. El diseño web receptivo intenta acomodar todos los escenarios de manera adecuada, independientemente del agente de usuario.
Eric King

¿Qué pasa si vas a servir una vista completamente diferente para los usuarios móviles? ¿Qué hay de evitar que los usos móviles descarguen todos los datos irrelevantes necesarios para los usuarios de escritorio? El agente de usuario es el camino a seguir ...
John

1

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.


3
Si alguien tuviera la necesidad de proporcionar datos falsos en los datos del agente de usuario, obtendrá una versión predeterminada del sitio web ...
John
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.