javascript - ismobile - Detección móvil
mobile detect js examples (9)
¿Hay alguna manera de detectar dispositivos móviles usando Javascript? Además, investigué que existe un XML así que contiene user-agents que podrían ayudar a identificar los teléfonos móviles.
Aquí hay un Javascript de detección móvil que puedo garantizar que funciona muy bien incluso con clientes ligeros como Opera MIni (descargo de responsabilidad: lo escribí):
El último lugar donde recomiendo el código de rastreo de 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 sabes 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 C-grade (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).
Enchufe la detección del teléfono . 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í.
Es probable que tenga un sitio normal y quiera 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 que quepa en una gran pantalla "virtual" en un espacio físico pequeño. Entonces, ¿por qué no verificar esas condiciones en lugar de probar un trillón de cadenas de UA?
Pruebe algo como esto:
Para que el AU informe el 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 practicamente 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é esta pregunta se ha cerrado; 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 encuentras 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 pocos milisegundos, hasta que advierten 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.
Escribí 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 algunos casos, 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 nuevamente. .
Puede encontrar el código fuente en github aquí https://github.com/sebarmeli/JS-Redirection-Mobile-Site y puede leer más detalles en uno de mis artículos aquí:
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 Apache Mobile Filter le permite acceder a WURFL desde cualquier lenguaje de programación, no solo 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
No recomendaría usar Javascript para detectar dispositivos móviles por la sencilla 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 a sus capacidades, tamaños de pantalla, profundidades de color, etc. De esa forma puede servir una configuración diferente de activos (archivos javascript, tamaños de imagen, etc.) según el dispositivo móvil.
Tengo este código de K2F, está en PHP , tendrás 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-'',)))
;
}
}
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;
}