¿Qué tan confiable está detectando dispositivos móviles por resolución de pantalla?

Question

Esto suena un poco demasiado bueno para ser verdad, así que por favor dígame si es así.

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

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

Nota: Mi pregunta supone que JavaScript está habilitado. Además, sé que hay detección de agentes de usuario, pero me gustaría prescindir de ella.

Answer 1

Deberá buscar en servir diferentes hojas de estilo a través de consultas de medios. Puede usar consultas para identificar ancho de pantalla y solo servir ciertos CSS a ciertos dispositivos. Por ejemplo, esta consulta serviría a un iPhone.css solo a los dispositivos identificados como 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 en Alistapart

Sin embargo, tenga en cuenta que no todos los dispositivos reconocen las consultas de los medios. Si necesita admitir muchos dispositivos más antiguos como BlackBerry y los teléfonos Flip, debe tomar el consejo anterior 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 la web móvil es un creciente, pero en muchos sentidos sigue siendo un nuevo horizonte.

Answer 2

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 'Chrome' y diferentes versiones del sistema operativo utilizan diferentes alturas para la barra del sistema. Todos los informes del mecanismo de detección informan imprecedentes para la altura (pantalla.

El ancho parece ser más confiable en la ventana.

Lea un excelente informe analítico aquí:

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

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 de talla única, al menos por ahora. Nuestro ciclo de lanzamiento es realmente largo: cualquier código duro de detección de UA será algo obsoleto para cuando se pruebe y 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. Sin embargo, no sé de qué tamaño elegiría: tengo un presentimiento de dispositivos móviles no están atados (incluso 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.

Puedo entender la vacilación de otras personas en 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 en este tipo de detección. Si su único problema es el tamaño de la pantalla, creo que es una buena manera de hacerlo.

Answer 4

Probablemente no le duele agregar esta funcionalidad a su sitio web para aquellos que realmente ejecutan navegadores web habilitados para JavaScript en sus dispositivos móviles. En cuanto a aquellos que no lo son, bueno, hay poco que puedas hacer sobre ellos, aparte de algo simple como dejar que seleccionen el tamaño de su pantalla al principio. ¿Quizás una lista desplegable simple con posibles tamaños?

Answer 5

Depende de lo que quieras lograr.

Si usted Diseño para diferentes resoluciones de pantalla independientemente del tipo de dispositivo Entonces está bien usar rangos de resolución.

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

Usaste un 400px Umbral En su ejemplo, el Galaxy S8+ informa 412x846 con este código:

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

Las resoluciones de dispositivos cambian cada año y están comenzando a superponerse 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 escritorios.

Puede salirse con la suya si solo desea que funcione principalmente o si desea detectar teléfonos específicos.

Sin embargo, no es confiable de usar resolución de pantalla sola para detectar el tipo de dispositivo.