2009-04-13 12 views
27

¿Hay alguna forma de detectar dispositivos móviles mediante Javascript? Además, investigué que existe un XML así que contiene user-agents que podrían ayudar a identificar los teléfonos móviles.Detección móvil

+2

Esto no es un duplicado. Es sutilmente diferente al artículo duplicado sugerido. El artículo duplicado analiza la resolución de la pantalla y esta pregunta trata sobre la detección de dispositivos móviles en general. –

+0

¿Cómo es esto no constructivo? Puede ser un duplicado de algo (probablemente algunos), pero definitivamente es constructivo. –

+1

los administradores parecen tener requisitos extremadamente estrechos y precisos para publicar aquí. – James

Respuesta

1

No recomendaría el uso de Javascript para detectar dispositivos móviles por la simple razón de que muchos de ellos no son compatibles con Javascript, por lo que no se garantiza que su código de detección funcione en todos los dispositivos.

Por lo general, la detección se realiza en el servidor utilizando un archivo de descriptor como WURFL que no solo ayudará a detectar los diversos agentes de usuario móviles, sino también sus capacidades, tamaños de pantalla, profundidades de color, etc. una configuración de activos diferente (archivos javascript, tamaños de imagen, etc.) dependiendo del dispositivo móvil.

+1

de acuerdo. Busco en mi BlackBerry con JS deshabilitado, y dudo que esté solo en eso. –

+8

-1 Pudo haber sido que todo el mundo deshabilitó JS en teléfonos móviles, pero el OP nunca lo solicitó. – Christian

+3

Tampoco preguntó cómo incendiar su cabeza, pero tampoco lo recomendaría. Explorar el navegador como un medio universal de detección para escribir códigos entre navegadores es una mala idea para los navegadores habituales, pero espectacularmente horrible para los dispositivos móviles. –

1

He publicado la última versión de "Apache Mobile Filter", este proyecto de código abierto tiene en los primeros 8 meses, más de 1100 descargas de sourceforge y supongo que lo mismo de CPAN.

El filtro móvil Apache le permite acceder a WURFL desde cualquier lenguaje de programación, no solo con Java y php que tradicionalmente se usan para sitios web móviles dinámicos.

El módulo detecta el dispositivo móvil y pasa las capacidades de WURFL a la otra aplicación web como variables de entorno. También se puede usar para cambiar el tamaño de las imágenes sobre la marcha para adaptarlas al tamaño de la pantalla del dispositivo móvil.

Pruébalo y déjame saber tu opinión.

Para más información: http://www.idelfuschini.it/it/apache-mobile-filter-v2x.html

1

http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

var deviceBB = "blackberry"; 

//Initialize our user agent string to lower case. 
var uagent = navigator.userAgent.toLowerCase(); 

//************************** // Detects if the current browser is a BlackBerry of some sort. 

function DetectBlackBerry() {  
if (uagent.search(deviceBB) > -1) 
     return true; else 
     return false; 
} 
6

Tengo este código de K2F, es en PHP, tendrá que convertirlo a javascript.

No debería ser una molestia. Conocer las constantes (bits de texto) debería ayudarte mucho.

/** 
* A simple class used to detect whether page<br> 
* is being viewed from a mobile device or not. 
* @copyright 2010 Covac Software 
* @author Christian Sciberras 
* @version 01/05/2010 
*/ 
class Mobile { 
    public static function is_mobile(){ 
     $user_agent = $_SERVER['HTTP_USER_AGENT']; // get the user agent value - this should be cleaned to ensure no nefarious input gets executed 
     $accept  = $_SERVER['HTTP_ACCEPT']; // get the content accept value - this should be cleaned to ensure no nefarious input gets executed 
     return false 
      || (preg_match('/ipad/i',$user_agent)) 
      || (preg_match('/ipod/i',$user_agent)||preg_match('/iphone/i',$user_agent)) 
      || (preg_match('/android/i',$user_agent)) 
      || (preg_match('/opera mini/i',$user_agent)) 
      || (preg_match('/blackberry/i',$user_agent)) 
      || (preg_match('/(pre\/|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine)/i',$user_agent)) 
      || (preg_match('/(iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile)/i',$user_agent)) 
      || (preg_match('/(mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|htc\/|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\/|me702|8325rc|kddi|phone|lg |sonyericsson|samsung|240x|x320|vx10|nokia|sony cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|psp|treo)/i',$user_agent)) 
      || ((strpos($accept,'text/vnd.wap.wml')>0)||(strpos($accept,'application/vnd.wap.xhtml+xml')>0)) 
      || (isset($_SERVER['HTTP_X_WAP_PROFILE'])||isset($_SERVER['HTTP_PROFILE'])) 
      || (in_array(strtolower(substr($user_agent,0,4)),array('1207'=>'1207','3gso'=>'3gso','4thp'=>'4thp','501i'=>'501i','502i'=>'502i','503i'=>'503i','504i'=>'504i','505i'=>'505i','506i'=>'506i','6310'=>'6310','6590'=>'6590','770s'=>'770s','802s'=>'802s','a wa'=>'a wa','acer'=>'acer','acs-'=>'acs-','airn'=>'airn','alav'=>'alav','asus'=>'asus','attw'=>'attw','au-m'=>'au-m','aur '=>'aur ','aus '=>'aus ','abac'=>'abac','acoo'=>'acoo','aiko'=>'aiko','alco'=>'alco','alca'=>'alca','amoi'=>'amoi','anex'=>'anex','anny'=>'anny','anyw'=>'anyw','aptu'=>'aptu','arch'=>'arch','argo'=>'argo','bell'=>'bell','bird'=>'bird','bw-n'=>'bw-n','bw-u'=>'bw-u','beck'=>'beck','benq'=>'benq','bilb'=>'bilb','blac'=>'blac','c55/'=>'c55/','cdm-'=>'cdm-','chtm'=>'chtm','capi'=>'capi','cond'=>'cond','craw'=>'craw','dall'=>'dall','dbte'=>'dbte','dc-s'=>'dc-s','dica'=>'dica','ds-d'=>'ds-d','ds12'=>'ds12','dait'=>'dait','devi'=>'devi','dmob'=>'dmob','doco'=>'doco','dopo'=>'dopo','el49'=>'el49','erk0'=>'erk0','esl8'=>'esl8','ez40'=>'ez40','ez60'=>'ez60','ez70'=>'ez70','ezos'=>'ezos','ezze'=>'ezze','elai'=>'elai','emul'=>'emul','eric'=>'eric','ezwa'=>'ezwa','fake'=>'fake','fly-'=>'fly-','fly_'=>'fly_','g-mo'=>'g-mo','g1 u'=>'g1 u','g560'=>'g560','gf-5'=>'gf-5','grun'=>'grun','gene'=>'gene','go.w'=>'go.w','good'=>'good','grad'=>'grad','hcit'=>'hcit','hd-m'=>'hd-m','hd-p'=>'hd-p','hd-t'=>'hd-t','hei-'=>'hei-','hp i'=>'hp i','hpip'=>'hpip','hs-c'=>'hs-c','htc '=>'htc ','htc-'=>'htc-','htca'=>'htca','htcg'=>'htcg','htcp'=>'htcp','htcs'=>'htcs','htct'=>'htct','htc_'=>'htc_','haie'=>'haie','hita'=>'hita','huaw'=>'huaw','hutc'=>'hutc','i-20'=>'i-20','i-go'=>'i-go','i-ma'=>'i-ma','i230'=>'i230','iac'=>'iac','iac-'=>'iac-','iac/'=>'iac/','ig01'=>'ig01','im1k'=>'im1k','inno'=>'inno','iris'=>'iris','jata'=>'jata','java'=>'java','kddi'=>'kddi','kgt'=>'kgt','kgt/'=>'kgt/','kpt '=>'kpt ','kwc-'=>'kwc-','klon'=>'klon','lexi'=>'lexi','lg g'=>'lg g','lg-a'=>'lg-a','lg-b'=>'lg-b','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-f'=>'lg-f','lg-g'=>'lg-g','lg-k'=>'lg-k','lg-l'=>'lg-l','lg-m'=>'lg-m','lg-o'=>'lg-o','lg-p'=>'lg-p','lg-s'=>'lg-s','lg-t'=>'lg-t','lg-u'=>'lg-u','lg-w'=>'lg-w','lg/k'=>'lg/k','lg/l'=>'lg/l','lg/u'=>'lg/u','lg50'=>'lg50','lg54'=>'lg54','lge-'=>'lge-','lge/'=>'lge/','lynx'=>'lynx','leno'=>'leno','m1-w'=>'m1-w','m3ga'=>'m3ga','m50/'=>'m50/','maui'=>'maui','mc01'=>'mc01','mc21'=>'mc21','mcca'=>'mcca','medi'=>'medi','meri'=>'meri','mio8'=>'mio8','mioa'=>'mioa','mo01'=>'mo01','mo02'=>'mo02','mode'=>'mode','modo'=>'modo','mot '=>'mot ','mot-'=>'mot-','mt50'=>'mt50','mtp1'=>'mtp1','mtv '=>'mtv ','mate'=>'mate','maxo'=>'maxo','merc'=>'merc','mits'=>'mits','mobi'=>'mobi','motv'=>'motv','mozz'=>'mozz','n100'=>'n100','n101'=>'n101','n102'=>'n102','n202'=>'n202','n203'=>'n203','n300'=>'n300','n302'=>'n302','n500'=>'n500','n502'=>'n502','n505'=>'n505','n700'=>'n700','n701'=>'n701','n710'=>'n710','nec-'=>'nec-','nem-'=>'nem-','newg'=>'newg','neon'=>'neon','netf'=>'netf','noki'=>'noki','nzph'=>'nzph','o2 x'=>'o2 x','o2-x'=>'o2-x','opwv'=>'opwv','owg1'=>'owg1','opti'=>'opti','oran'=>'oran','p800'=>'p800','pand'=>'pand','pg-1'=>'pg-1','pg-2'=>'pg-2','pg-3'=>'pg-3','pg-6'=>'pg-6','pg-8'=>'pg-8','pg-c'=>'pg-c','pg13'=>'pg13','phil'=>'phil','pn-2'=>'pn-2','pt-g'=>'pt-g','palm'=>'palm','pana'=>'pana','pire'=>'pire','pock'=>'pock','pose'=>'pose','psio'=>'psio','qa-a'=>'qa-a','qc-2'=>'qc-2','qc-3'=>'qc-3','qc-5'=>'qc-5','qc-7'=>'qc-7','qc07'=>'qc07','qc12'=>'qc12','qc21'=>'qc21','qc32'=>'qc32','qc60'=>'qc60','qci-'=>'qci-','qwap'=>'qwap','qtek'=>'qtek','r380'=>'r380','r600'=>'r600','raks'=>'raks','rim9'=>'rim9','rove'=>'rove','s55/'=>'s55/','sage'=>'sage','sams'=>'sams','sc01'=>'sc01','sch-'=>'sch-','scp-'=>'scp-','sdk/'=>'sdk/','se47'=>'se47','sec-'=>'sec-','sec0'=>'sec0','sec1'=>'sec1','semc'=>'semc','sgh-'=>'sgh-','shar'=>'shar','sie-'=>'sie-','sk-0'=>'sk-0','sl45'=>'sl45','slid'=>'slid','smb3'=>'smb3','smt5'=>'smt5','sp01'=>'sp01','sph-'=>'sph-','spv '=>'spv ','spv-'=>'spv-','sy01'=>'sy01','samm'=>'samm','sany'=>'sany','sava'=>'sava','scoo'=>'scoo','send'=>'send','siem'=>'siem','smar'=>'smar','smit'=>'smit','soft'=>'soft','sony'=>'sony','t-mo'=>'t-mo','t218'=>'t218','t250'=>'t250','t600'=>'t600','t610'=>'t610','t618'=>'t618','tcl-'=>'tcl-','tdg-'=>'tdg-','telm'=>'telm','tim-'=>'tim-','ts70'=>'ts70','tsm-'=>'tsm-','tsm3'=>'tsm3','tsm5'=>'tsm5','tx-9'=>'tx-9','tagt'=>'tagt','talk'=>'talk','teli'=>'teli','topl'=>'topl','hiba'=>'hiba','up.b'=>'up.b','upg1'=>'upg1','utst'=>'utst','v400'=>'v400','v750'=>'v750','veri'=>'veri','vk-v'=>'vk-v','vk40'=>'vk40','vk50'=>'vk50','vk52'=>'vk52','vk53'=>'vk53','vm40'=>'vm40','vx98'=>'vx98','virg'=>'virg','vite'=>'vite','voda'=>'voda','vulc'=>'vulc','w3c '=>'w3c ','w3c-'=>'w3c-','wapj'=>'wapj','wapp'=>'wapp','wapu'=>'wapu','wapm'=>'wapm','wig '=>'wig ','wapi'=>'wapi','wapr'=>'wapr','wapv'=>'wapv','wapy'=>'wapy','wapa'=>'wapa','waps'=>'waps','wapt'=>'wapt','winc'=>'winc','winw'=>'winw','wonu'=>'wonu','x700'=>'x700','xda2'=>'xda2','xdag'=>'xdag','yas-'=>'yas-','your'=>'your','zte-'=>'zte-','zeto'=>'zeto','acs-'=>'acs-','alav'=>'alav','alca'=>'alca','amoi'=>'amoi','aste'=>'aste','audi'=>'audi','avan'=>'avan','benq'=>'benq','bird'=>'bird','blac'=>'blac','blaz'=>'blaz','brew'=>'brew','brvw'=>'brvw','bumb'=>'bumb','ccwa'=>'ccwa','cell'=>'cell','cldc'=>'cldc','cmd-'=>'cmd-','dang'=>'dang','doco'=>'doco','eml2'=>'eml2','eric'=>'eric','fetc'=>'fetc','hipt'=>'hipt','http'=>'http','ibro'=>'ibro','idea'=>'idea','ikom'=>'ikom','inno'=>'inno','ipaq'=>'ipaq','jbro'=>'jbro','jemu'=>'jemu','java'=>'java','jigs'=>'jigs','kddi'=>'kddi','keji'=>'keji','kyoc'=>'kyoc','kyok'=>'kyok','leno'=>'leno','lg-c'=>'lg-c','lg-d'=>'lg-d','lg-g'=>'lg-g','lge-'=>'lge-','libw'=>'libw','m-cr'=>'m-cr','maui'=>'maui','maxo'=>'maxo','midp'=>'midp','mits'=>'mits','mmef'=>'mmef','mobi'=>'mobi','mot-'=>'mot-','moto'=>'moto','mwbp'=>'mwbp','mywa'=>'mywa','nec-'=>'nec-','newt'=>'newt','nok6'=>'nok6','noki'=>'noki','o2im'=>'o2im','opwv'=>'opwv','palm'=>'palm','pana'=>'pana','pant'=>'pant','pdxg'=>'pdxg','phil'=>'phil','play'=>'play','pluc'=>'pluc','port'=>'port','prox'=>'prox','qtek'=>'qtek','qwap'=>'qwap','rozo'=>'rozo','sage'=>'sage','sama'=>'sama','sams'=>'sams','sany'=>'sany','sch-'=>'sch-','sec-'=>'sec-','send'=>'send','seri'=>'seri','sgh-'=>'sgh-','shar'=>'shar','sie-'=>'sie-','siem'=>'siem','smal'=>'smal','smar'=>'smar','sony'=>'sony','sph-'=>'sph-','symb'=>'symb','t-mo'=>'t-mo','teli'=>'teli','tim-'=>'tim-','tosh'=>'tosh','treo'=>'treo','tsm-'=>'tsm-','upg1'=>'upg1','upsi'=>'upsi','vk-v'=>'vk-v','voda'=>'voda','vx52'=>'vx52','vx53'=>'vx53','vx60'=>'vx60','vx61'=>'vx61','vx70'=>'vx70','vx80'=>'vx80','vx81'=>'vx81','vx83'=>'vx83','vx85'=>'vx85','wap-'=>'wap-','wapa'=>'wapa','wapi'=>'wapi','wapp'=>'wapp','wapr'=>'wapr','webc'=>'webc','whit'=>'whit','winw'=>'winw','wmlb'=>'wmlb','xda-'=>'xda-',))) 
     ; 
    } 
} 
+0

¿Puedes proporcionar el enlace a esta fuente? –

+0

@Phill Pafford - Desafortunadamente, K2F aún no está disponible para el público. – Christian

3

me escribió un script JS llamado "redirection_mobile.js" para resolver este problema. Detecta el agente de usuario y redirige a una versión móvil si está accediendo a un sitio desde un dispositivo móvil.

En algún caso, usted desea redirigir desde un dispositivo móvil a una versión de escritorio (como con un enlace "Ir al sitio principal"), el script lo manejará y una vez que termine su sesión, tendrá acceso a la versión móvil otra vez.

Puede encontrar el código fuente en GitHub aquí https://github.com/sebarmeli/JS-Redirection-Mobile-Site y se puede leer más detalles en uno de mis artículos aquí:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

+0

Agradezco a todas las personas que advierten sobre el rastreo del navegador, pero la detección de capacidad no funciona bien cuando solo desea enviar dispositivos móviles a un sitio que está optimizado para ellos. Tenemos Squid en frente de nuestro servidor de aplicaciones, y necesitábamos una solución de javascript que fuera gratis, esta se ajustaba a la perfección. ¡Gracias! – mooreds

2

El último lugar que recomiendo el código de rastreo del navegador es el móvil. Es el salvaje oeste en este momento y nadie está leyendo el mismo libro de reglas. He escuchado rumores de que algunos navegadores están imitando a otros agentes de usuario para evitar olfatear el código que los excluye, como lo hacía IE en los '90.

Prueba por método y mejora progresiva de Google si aún no sabe lo que significa.Algunas implementaciones de navegador de JS están tan desordenadas que no vale la pena tratar de acomodar y se deben servir las versiones de un sitio que funciona sin JS, IMO.

Basta con ver lo que el equipo central de JQuery considera de grado C (no vale la pena apoyar) en sus tablas de compatibilidad gradual. Y sí, creo que esto se aplica tanto al núcleo como a la biblioteca móvil de JQ (que es algo así como JQ ui para dispositivos móviles, no JQ core para dispositivos móviles, todavía necesita núcleo para funcionar).

http://jquerymobile.com/gbs/

1

Enchufe Handset Detection. Puede usar Javascript, PHP o los lenguajes de scripting más populares. Nos ocupamos del dolor para que no tengas que :-) Descargo de responsabilidad: yo trabajo allí.

16

Es probable que tenga un sitio normal y desee redireccionar a un sitio móvil si se cumplen ciertas condiciones, como que la pantalla es muy pequeña, o el contenido se aleja para ajustarse a una gran pantalla "virtual" en un pequeño espacio fisico. Entonces, ¿por qué no verificar esas condiciones en lugar de probar un trillón de cadenas de UA?

intentar algo como esto:

Para la UA para informar de tamaño de píxel físico de la pantalla, esta etiqueta debe estar presente en la página HTML. *

<meta name="viewport" 
     content="width=device-width, initial-scale=1, maximum-scale=1" /> 

Ahora, simplemente obtenga el tamaño de la pantalla y redirija si es necesario. Usa un ligero retraso **

setTimeout(function(){ 
    if ((screen.width < 480) || (screen.height < 480)) { 
    location.replace('/mobile/'); 
    } 
}, 100); 

Eso es todo. Como esta página ya tiene configurada la etiqueta viewport para dispositivos móviles, también puede hacer lo inverso, mostrar el dispositivo móvil aquí y redireccionar al sitio completo si la pantalla es más grande.

Editar: No estoy seguro de por qué se ha cerrado esta pregunta; por lo que yo sé, encaja muy bien en el formato SO. Votado para reabrir.

* Insertarlo con javascript no parece funcionar (alguien por favor corrígeme si encuentra una manera). Si no está presente, el teléfono informará un tamaño de pantalla virtual que es más grande que la pantalla real. Tampoco parece funcionar en iframes, solo en las ventanas de nivel superior (lo cual tiene sentido porque los iframes necesitarán escalar la misma cantidad que la ventana externa, comparten la misma ventana gráfica).

** Algunos navegadores móviles mantienen el tamaño de la vista desde la última página cargada, por lo que informan un gran tamaño de pantalla virtual durante unos milisegundos, hasta que notan la metaetiqueta, supongo. No pude encontrar un evento temprano para conectar esto, por favor comente si tiene una mejor manera de hacerlo. La demora de 50 ms funcionó bien en todas mis pruebas, 100 deberían ser mayormente seguras.

+0

Guau, solución realmente buena ... algo feo, supongo, pero sin duda es una forma interesante de hacerlo :) Lamentablemente, con las densidades de píxeles cada vez más altas, creo que esta no es la mejor idea. Los píxeles no son indicativos del tamaño físico real ... hmm. –

+2

Las densidades de píxeles no lo afectarán, ya que la mayoría (probablemente hasta ahora) de los dispositivos con píxeles densos informan un número menor de píxeles de lo que realmente contienen e informan la densidad de píxeles por separado. –

1

Aquí es un móvil de la detección Javascript que puedo garantizar que funciona muy bien incluso con clientes ligeros como Opera Mini (exención de responsabilidad: La escribí):

https://github.com/miohtama/detectmobile.js

Cuestiones relacionadas