javascript - sintomas - que significa aplicaciones en ejecucion

Detectar teléfono vs tableta

Question

¿Hay alguna forma 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 versión 3+ y iPad) seguramente le gustaría ver la misma versión no simplificada 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 podría ser más fácil navegar con el pulgar. Esto se podría hacer comprobando el ancho de la pantalla de oct de userAgent que se encuentra aquí:

¿Cuál es la mejor manera de detectar un dispositivo móvil en jQuery?

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

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

Answer 1

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

Answer 2

Basado en la sugerencia de google: encontrado aquí (también mencionado por Greg) esto es lo que he usado en proyectos antes.

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

Tal vez no sea la solución más elegante ... pero hace el trabajo.

Answer 3

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

Answer 4

Creo que WURFL podría ser algo a lo que mirar: http://wurfl.sourceforge.net/help_doc.php Es un poco más duro ya que es una solución más orientada al servidor en lugar de hacerlo simplemente a través de consultas de medios simples (por ejemplo, la suya propia o utilizando un marco como Foundation CSS) o con javascript puro (adapt.js).

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 5

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

En este caso, trataría de implementar la lógica basada en los valores pasados ​​por el agente de usuario en los encabezados HTTP ( [mobiforge.com...] ) y degradar con gracia a preguntar al usuario si no hay información disponible.

Tu lógica podría verse un poco así:

• Si el agente de usuario proporciona un tamaño de pantalla física en encabezados HTTP
  Dimensiones físicas = valor UA.
  
• de lo contrario, si el agente de usuario proporciona una resolución y dimensiones de píxeles
  Dimensiones físicas = dimensiones de píxeles divididas por resolución.
• (opcionalmente) de lo contrario, use el script del lado del cliente para detectar la resolución y PPI
• de lo contrario, si la cadena de agente de usuario se parece a algún tipo de dispositivo móvil (expresión regular)
  pedir al usuario que seleccione.
• de otra manera
  asume una opción por defecto.

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

Answer 6

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

Todavía tengo que encontrar un agente de usuario que incluya las dimensiones del dispositivo.

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

Busque iPad / iPod / iPhone en la cadena de 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 dispositivos i, por lo que también será más fácil distinguirlos.

Para identificar un dispositivo Android, busque "Android" en la cadena del agente de usuario. Para determinar si es 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". Google recomienda este método:

Como una solución para sitios móviles, nuestros ingenieros de Android recomiendan detectar específicamente "móvil" en la cadena User-Agent, así como "android".

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

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

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

Answer 7

Puede usar algo como Device Atlas para detectar estas funciones en el Agente de usuario. Ofrecen una API que puede alojar usted mismo y también ofrecen un servicio en la nube. Ambos son premium (pagado)

Alternativamente, puedes usar algo como Wurfl que, en mi experiencia, es menos preciso.

Answer 8

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

La forma más sencilla de identificar dispositivos móviles de alta resolución sería mirar el DPI de la pantalla y la proporción de píxeles del dispositivo (a través de las etiquetas específicas del proveedor webkit / mozilla actualmente)

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

edit: window.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 9

Si estás usando Cordova me gusta esto:

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

entonces en cualquier parte de tu código llama a esto:

window.isTablet