¿Qué tan confiable es detectar dispositivos móviles por resolución de pantalla?

Question

Esto suena demasiado bueno para ser verdad, así que dígame si es cierto.

Si tengo una sola versión de un sitio web móvil (no hay variaciones para dispositivos diferentes, solo un sitio web para todos los móviles), ¿qué tan confiable es para detectar dispositivos móviles por resolución de pantalla?

Y simplemente sirve la versión móvil si la resolución de pantalla es < que digamos 400px.

NOTA: Mi pregunta asume que javascript está habilitado. Además, soy consciente de que hay detección de agente de usuario , pero me gustaría prescindir de ella.

Answer 1

Deseará examinar servir diferentes hojas de estilo a través de consultas de medios. Puede usar consultas para identificar anchos de pantalla y solo servir cierto CSS a ciertos dispositivos. Por ejemplo esta consulta serviría un iphone.css solamente a los dispositivos identificados con las dimensiones típicas de un iPhone:

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" /> 

Hay un artículo detallado sobre este tema más a alistapart

Tenga en cuenta sin embargo que no se todos los dispositivos reconocen consultas de medios. Si necesita admitir muchos dispositivos más antiguos como Blackberry y Flip Phone, debe seguir los consejos anteriores para usar la detección de UA. Sé que se siente mal si viene del mundo del desarrollo de escritorio, pero realmente tenemos que usar las herramientas que tenemos. disponible para nosotros y Mobile Web es un crecimiento, pero en muchos sentidos sigue siendo un nuevo horizonte.

Answer 2

Probablemente no vaya a doler agregar esta funcionalidad a su sitio web para aquellos que de hecho están ejecutando navegadores web con JavaScript habilitado en sus dispositivos móviles. En cuanto a los que no lo son, ¿hay poco que puedas hacer al respecto, aparte de algo tan simple como dejar que seleccionen el tamaño de la pantalla al primer cargamento? ¿Tal vez una simple lista desplegable con posibles tamaños?

Answer 3

Vine aquí porque tenía la misma idea y pregunta, y una situación similar: el sitio web ya requiere JavaScript y estoy haciendo una aplicación web móvil para todos, al menos por ahora. Nuestro ciclo de lanzamiento es realmente largo: cualquier código de detección UA duro quedará algo obsoleto para cuando se pruebe y se libere el código. Dado que el propósito de esta interfaz alternativa es hacer que funcione en pantallas más pequeñas, parece tener sentido usar esa prueba. No sé, sin embargo, qué tamaño elegiría. Tengo la corazonada de que los dispositivos móviles no están vinculados (ni siquiera por convención) a dimensiones de pantalla particulares. Supongo que solo tenemos que decidir en qué punto la página web principal ya no es funcional.

Entiendo las dudas de otras personas sobre este enfoque porque a veces hay otros problemas con un sitio estándar en un dispositivo móvil que solo el tamaño de la pantalla. Sin embargo, creo que hay una ventaja para este tipo de detección. Si su único problema es el tamaño de la pantalla, creo que es una buena forma de hacerlo.

Answer 4

La detección de pantalla del dispositivo móvil Javascript para la altura no es confiable en absoluto. El problema es que diferentes navegadores usan diferentes cantidades de 'cromo' y diferentes versiones del sistema operativo usan diferentes alturas para la barra del sistema. Todo el mecanismo de detección no es confiable para la altura (screen.height, window.outerHeight, window.innerHeight - etc, etc.)

El ancho parece ser más confiable en window.outerWidth en todos los sistemas operativos.

leer un informe analítico más excelente aquí:

http://www.tripleodeon.com/2011/12/first-understand-your-screen/

Answer 5

Depende de lo que quiere lograr.

Si tiene diseño para diferentes resoluciones de pantalla, independientemente del tipo de dispositivo, entonces está bien utilizar rangos de resolución.

Si tiene diseño para tipos de dispositivo específicos (teléfono, tableta, etc.) y asume que un rango de resolución siempre coincidirá con un solo dispositivo tipo, entonces eventualmente se romperá.

Se utilizó un umbral 400px en su ejemplo, el Galaxy S8 + informa 412x846 con este código:

console.log("width: " + screen.width + ", height: " + screen.height);

resoluciones dispositivo de cambio de cada año y que están empezando a solaparse entre sí. Los teléfonos grandes tienen resoluciones más altas que las tabletas pequeñas y las tabletas grandes tienen una resolución más alta que algunos equipos de escritorio.

Puede salirse con la suya si solo desea que funcione en su mayoría o si desea detectar teléfonos específicos.

Sin embargo, no es confiable utilizar la resolución de pantalla solo para detectar el tipo de dispositivo.