Detectar teléfono frente a tableta

Question

¿Hay alguna manera de detectar si el usuario está usando una tableta o un teléfono? Como ejemplo, una persona que navega por la web usando una tableta (cualquier tableta Android con la versión 3+ y el iPad) seguramente desearía ver la misma versión no desglosada que una persona sentada con una computadora de escritorio. Y un internauta seguramente preferiría la versión simplificada del sitio porque es más rápido de cargar y es más fácil navegar con el pulgar. Esto podría hacerse con la comprobación de octubre userAgent ancho de la pantalla encontrar aquí:

What is the best way to detect a mobile device in jQuery?

Pero el problema viene con un teléfono como Google Nexus Galaxy que tiene la misma resolución que una tableta, pero sólo la mitad del tamaño de la pantalla. En mi opinión, sería más agradable mostrar la versión móvil ya que la pantalla es pequeña aunque la resolución sea alta.

¿Hay alguna manera de detectar esto o tengo que hacer un compromiso?

Answer 1

Creo que estás haciendo una distinción arbitraria entre fundamentalmente tableta, teléfono o cualquier otro dispositivo habilitado para la web aquí. Parece que las dimensiones físicas de la pantalla son las métricas que desea usar para dictar el contenido que sirve.

En este caso, intentaría implementar la lógica basada en los valores pasados ​​por el agente de usuario en los encabezados HTTP ([mobiforge.com...]) y me degradaría graciosamente para avisarle al usuario si la información no está disponible.

Su lógica puede parecer un poco como esto:

• Si el agente de usuario proporciona un tamaño de pantalla física en las cabeceras HTTP
  dimensiones físicas = valor UA.
  
• de lo contrario, si el agente de usuario supplies a resolution and pixel dimensions
  dimensiones físicas = dimensiones de píxeles divididos por la resolución.
• (opcionalmente) de lo contrario, use client side script to detect resolution and PPI
• de otro modo, si la cadena de agente de usuario se parece a algún tipo de dispositivo móvil (expresiones regulares)
  rápida que el usuario seleccione.
• de lo contrario
  asume una opción predeterminada.

---

actualización: Mi respuesta es ahora tres años. Vale la pena señalar que el soporte para el diseño receptivo ha progresado significativamente y ahora es común entregar el mismo contenido a todos los dispositivos y confiar en las consultas de medios css para presentar el sitio de la manera más efectiva para el dispositivo en el que se está visualizando.

Answer 2

Puede usar algo como Device Atlas para detectar estas funciones del agente de usuario. La oferta de una API que puede alojar usted mismo, y también ofrecen un servicio en la nube. Ambos son premium (pagados)

Como alternativa, puede usar algo como Wurfl que, en mi experiencia, es menos preciso.

Answer 3

¿Por qué intentar adivinar qué tiene el usuario cuando se puede preguntar? Puede usar la resolución para adivinar qué tipo de dispositivo se está utilizando y preguntar al usuario qué vista quiere si entra en la categoría de posiblemente dispositivo móvil o tableta. Si lo detecta mal, es una molestia para el usuario. En mi opinión, es más conveniente preguntarles qué tipo de dispositivo tienen.

Answer 4

Si está utilizando consultas de medios, en teoría podría usar @media handheld, pero la compatibilidad es prácticamente inexistente.

forma más sencilla de identificar de alta resolución dispositivos móviles sería buscar en el PED de la pantalla y el pixel-ratio de dispositivo (a través de proveedores webkit/Mozilla etiquetas específicas momento)

@media (-webkit-max-device-pixel-ratio: 2), 
(max--moz-device-pixel-ratio: 2), 
(min-resolution: 300dpi) { 
    ... 
} 

edición: ventana. devicePixelRatio para hacer lo anterior en JS

Aquí hay un buen artículo con muchas ideas para identificar dispositivos móviles.

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Answer 5

creo WURFL podría ser algo a tener en cuenta: http://wurfl.sourceforge.net/help_doc.php Es un poco más duro desde su más solución de servidor en lugar de hacerlo simplemente a través de consultas de medios simples (por ejemplo, su cuenta o utilizar un framework como Fundación CSS) o con javascript puro (adapt.js).

de lo que puede hacer algo como:

$is_wireless = ($requestingDevice->getCapability('is_wireless_device') == 'true'); 
$is_smarttv = ($requestingDevice->getCapability('is_smarttv') == 'true'); 
$is_tablet = ($requestingDevice->getCapability('is_tablet') == 'true'); 
$is_phone = ($requestingDevice->getCapability('can_assign_phone_number') == 'true'); 

if (!$is_wireless) { 
if ($is_smarttv) { 
    echo "This is a Smart TV"; 
} else { 
    echo "This is a Desktop Web Browser"; 
} 
} else { 
if ($is_tablet) { 
    echo "This is a Tablet"; 
} else if ($is_phone) { 
    echo "This is a Mobile Phone"; 
} else { 
    echo "This is a Mobile Device"; 
} 
} 

ref: http://wurfl.sourceforge.net/php_index.php

o en Java:

WURFLHolder wurfl = (WURFLHolder) getServletContext().getAttribute(WURFLHolder.class.getName()); 
WURFLManager manager = wurfl.getWURFLManager(); 
Device device = manager.getDeviceForRequest(request); 
String x = device.getCapability("is_tablet"); //returns String, not boolean btw 

ref: http://wurfl.sourceforge.net/njava_index.php

Answer 6

Desafortunadamente, a partir de ahora, el único forma confiable de distinguir entre móvil y tableta es a través de la cadena de agente de usuario.

Aún no he encontrado un agente de usuario que incluya las dimensiones del dispositivo.

Si intentas calcular el dispositivo ppi, casi todos inevitablemente saldrán a 96ppi, ya sea un escritorio o un teléfono.

Busque el iPad/iPod/iPhone en la cadena del agente de usuario para detectar cualquier dispositivo Apple. Esto le dirá si tiene una tableta o teléfono/iPod de Apple. Afortunadamente, hay muchos menos sabores de i-devices, por lo que también será más fácil distinguirlos.

Para identificar un dispositivo Android, busque "Android" en la cadena de agente de usuario. Para determinar si se trata de una tableta o un teléfono, el agente de usuario del teléfono (para el navegador nativo de Android y Chrome) contendrá "Mobile Safari", mientras que la tableta solo contendrá "Safari". Este método es recomendado por Google:

Como solución para los sitios móviles, nuestros ingenieros Android recomiendan para detectar específicamente “móvil” en la cadena de agente de usuario, así como “androide .”

Una descripción más detallada se puede encontrar aquí:

http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html

Por supuesto, esto no es lo ideal, pero que parece ser el único medio fiable. Como advertencia, al observar una gran lista de muestra de cadenas de agentes de usuario (cerca de cien), vi uno o dos dispositivos antiguos que no se ajustaban correctamente a la distinción "Móvil" frente a "Safari móvil".

Answer 7

Basado en la sugerencia de google: found here (también mencionado por Greg) esto es lo que he usado anteriormente en proyectos.

if(/Mobile/i.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent)){ 
     console.log("it's a phone");//your code here 
    } 

Quizás no sea la solución más elegante ... pero cumple su función.

Answer 8

Como han señalado muchos otros carteles, es probable que desee analizar el encabezado de solicitud User-Agent. Para este propósito, encontré la biblioteca ua-parser-js muy útil.

Answer 9

Si está utilizando Cordova me gusta esto:

cordova plugin add uk.co.workingedge.phonegap.plugin.istablet 

entonces cualquier parte del código de llamada esto:

window.isTablet