movil - javascript dispositivo

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

A veces se desea saber qué dispositivo de marca está utilizando un cliente para mostrar contenido específico de ese dispositivo, como un enlace a la tienda de iPhone o Android Market. El modernizador es genial, pero solo muestra las capacidades del navegador, como HTML5 o Flash.

Aquí está mi solución UserAgent en jQuery para mostrar una clase diferente para cada tipo de dispositivo:

/*** sniff the UA of the client and show hidden div''s for that device ***/ var customizeForDevice = function(){ var ua = navigator.userAgent; var checker = { iphone: ua.match(/(iPhone|iPod|iPad)/), blackberry: ua.match(/BlackBerry/), android: ua.match(/Android/) }; if (checker.android){ $(''.android-only'').show(); } else if (checker.iphone){ $(''.idevice-only'').show(); } else if (checker.blackberry){ $(''.berry-only'').show(); } else { $(''.unknown-device'').show(); } }

Esta solución es de Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

¿Existe una forma sólida de detectar si un usuario está utilizando un dispositivo móvil en jQuery o no? ¿Algo similar al atributo CSS @media? Me gustaría ejecutar un script diferente si el navegador está en un dispositivo de mano.

La función jQuery $.browser no es lo que estoy buscando.

Aquí hay una función que puede usar para obtener una respuesta verdadera / falsa sobre si está ejecutando en un navegador móvil. Sí, es un rastreo del navegador, pero a veces eso es exactamente lo que necesitas.

function is_mobile() { var agents = [''android'', ''webos'', ''iphone'', ''ipad'', ''blackberry'']; for(i in agents) { if(navigator.userAgent.match(''/''+agents[i]+''/i'')) { return true; } } return false; }

Echa un vistazo a esta post , que ofrece un fragmento de código realmente agradable para saber qué hacer cuando se detectan dispositivos táctiles o qué hacer si se llama al evento touchstart:

$(function(){ if(window.Touch) { touch_detect.auto_detected(); } else { document.ontouchstart = touch_detect.surface; } }); // End loaded jQuery var touch_detect = { auto_detected: function(event){ /* add everything you want to do onLoad here (eg. activating hover controls) */ alert(''this was auto detected''); activateTouchArea(); }, surface: function(event){ /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */ alert(''this was detected by touching''); activateTouchArea(); } }; // touch_detect function activateTouchArea(){ /* make sure our screen doesn''t scroll when we move the "touchable area" */ var element = document.getElementById(''element_id''); element.addEventListener("touchstart", touchStart, false); } function touchStart(event) { /* modularize preventing the default behavior so we can use it again */ event.preventDefault(); }

En lugar de usar jQuery, puedes usar JavaScript simple para detectarlo:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // some code.. }

O puede combinarlos para hacerlos más accesibles a través de jQuery ...

Ahora $.browser devolverá "device" para todos los dispositivos anteriores

Nota: $.browser eliminado en jQuery v1.9.1 . Pero puede usar esto utilizando el Code complemento de migración jQuery

Una versión más completa:

var isMobile = false; //initiate as false // device detection if(/(android|bb/d+|meego).+mobile|avantgo|bada//|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)//|plucker|pocket|psp|series(4|6)0|symbian|treo|up/.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s/-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|/-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw/-(n|u)|c55//|capi|ccwa|cdm/-|cell|chtm|cldc|cmd/-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc/-s|devi|dica|dmob|do(c|p)o|ds(12|/-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(/-|_)|g1 u|g560|gene|gf/-5|g/-mo|go(/.w|od)|gr(ad|un)|haie|hcit|hd/-(m|p|t)|hei/-|hi(pt|ta)|hp( i|ip)|hs/-c|ht(c(/-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i/-(20|go|ma)|i230|iac( |/-|//)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |//)|klon|kpt |kwc/-|kyo(c|k)|le(no|xi)|lg( g|//(k|l|u)|50|54|/-[a-w])|libw|lynx|m1/-w|m3ga|m50//|ma(te|ui|xo)|mc(01|21|ca)|m/-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(/-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)/-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|/-([1-8]|c))|phil|pire|pl(ay|uc)|pn/-2|po(ck|rt|se)|prox|psio|pt/-g|qa/-a|qc(07|12|21|32|60|/-[2-7]|i/-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55//|sa(ge|ma|mm|ms|ny|va)|sc(01|h/-|oo|p/-)|sdk//|se(c(/-|0|1)|47|mc|nd|ri)|sgh/-|shar|sie(/-|m)|sk/-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h/-|v/-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl/-|tdg/-|tel(i|m)|tim/-|t/-mo|to(pl|sh)|ts(70|m/-|m3|m5)|tx/-9|up(/.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|/-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(/-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas/-|your|zeto|zte/-/i.test(navigator.userAgent.substr(0,4))) { isMobile = true; }

En una línea de javascript:

var isMobile = (''ontouchstart'' in document.documentElement && navigator.userAgent.match(/Mobi/));

Si el agente de usuario contiene ''Mobi'' (según MDN) y si está disponible "touchstart", es probable que sea un dispositivo móvil.

Encontré una solución en: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

Y luego, para verificar si es un móvil, puedes probar usando:

if(isMobile.any()) { //some code... }

Lo que está haciendo al querer detectar un dispositivo móvil es acercarse demasiado a un concepto de "rastreo del navegador" IMO. Probablemente sería mucho mejor hacer alguna detección de características. Las bibliotecas como http://www.modernizr.com/ pueden ayudar con eso.

Por ejemplo, ¿dónde está la línea entre móvil y no móvil? Se pone cada vez más borrosa cada día.

Me sorprende que nadie haya señalado un sitio agradable: http://detectmobilebrowsers.com/ Tiene un código ya creado en diferentes idiomas para la detección móvil (incluido, entre otros):

apache
ÁSPID
DO#
IIS
JavaScript
NGINX
PHP
Perl
Pitón
Rieles

Y si también necesita detectar las tabletas, simplemente consulte la sección Acerca de para el parámetro RegEx adicional.

Las tabletas, iPads, Kindle Fires y PlayBooks de Android no se detectan por diseño. Para agregar soporte para tabletas, agregue |android|ipad|playbook|silk al primer regex.

No es jQuery, pero encontré esto: http://detectmobilebrowser.com/

Proporciona scripts para detectar navegadores móviles en varios idiomas, uno de los cuales es JavaScript. Eso puede ayudarte con lo que estás buscando.

Sin embargo, dado que está utilizando jQuery, es posible que desee conocer la colección jQuery.support. Es una colección de propiedades para detectar las capacidades del navegador actual. La documentación está aquí: http://api.jquery.com/jQuery.support/

Como no sé qué es exactamente lo que estás tratando de lograr, no sé cuál de estos será el más útil.

Dicho todo esto, creo que lo mejor que puede hacer es redirigir o escribir un script diferente a la salida utilizando un lenguaje del lado del servidor (si esa es una opción). Como realmente no conoce las capacidades de un navegador móvil x, el método más confiable sería la detección y la lógica de alteración en el lado del servidor. Por supuesto, todo eso es un punto discutible si no puedes usar un idioma del lado del servidor :)

No puede confiar en navigator.userAgent , no todos los dispositivos revelan su sistema operativo real. En mi HTC, por ejemplo, depende de la configuración ("uso de la versión móvil" activado / desactivado). En http://my.clockodo.com , simplemente usamos screen.width para detectar dispositivos pequeños. Desafortunadamente, en algunas versiones de Android hay un error con screen.width. Puedes combinar de esta manera con el userAgent:

if(screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { alert("This is a mobile device"); }

Para agregar una capa adicional de control, uso el almacenamiento HTML5 para detectar si está usando almacenamiento móvil o de escritorio. Si el navegador no admite almacenamiento, tengo una matriz de nombres de navegadores móviles y comparo el agente de usuario con los navegadores de la matriz.

Es bastante simple. Aquí está la función:

// Used to detect whether the users browser is an mobile browser function isMobile() { ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary> ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns> if (sessionStorage.desktop) // desktop storage return false; else if (localStorage.mobile) // mobile storage return true; // alternative mobile = [''iphone'',''ipad'',''android'',''blackberry'',''nokia'',''opera mini'',''windows mobile'',''windows phone'',''iemobile'',''tablet'',''mobi'']; var ua=navigator.userAgent.toLowerCase(); for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true; // nothing found.. assume desktop return false; }

Para mí lo pequeño es hermoso, así que estoy usando esta técnica:

En el archivo CSS:

/* Smartphones ----------- */ @media only screen and (max-width: 760px) { #some-element { display: none; } }

En el archivo jQuery / JavaScript:

$( document ).ready(function() { var is_mobile = false; if( $(''#some-element'').css(''display'')==''none'') { is_mobile = true; } // now i can use is_mobile to run javascript conditionally if (is_mobile == true) { //Conditional script here } });

Mi objetivo era tener mi sitio "compatible con dispositivos móviles". Así que uso CSS Media Queries para mostrar / ocultar elementos dependiendo del tamaño de la pantalla.

Por ejemplo, en mi versión móvil no quiero activar el Facebook Like Box, ya que carga todas esas imágenes de perfil y esas cosas. Y eso no es bueno para los visitantes móviles. Entonces, además de ocultar el elemento contenedor, también hago esto dentro del bloque de código jQuery (arriba):

if(!is_mobile) { (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735"; fjs.parentNode.insertBefore(js, fjs); }(document, ''script'', ''facebook-jssdk'')); }

Puedes verlo en acción en http://lisboaautentica.com

Todavía estoy trabajando en la versión móvil, por lo que todavía no se ve como debería, al momento de escribir esto.

Actualización por dekin88

Hay una API de JavaScript incorporada para detectar medios. En lugar de usar la solución anterior, simplemente use lo siguiente:

$( document ).ready(function() { var isMobile = window.matchMedia("only screen and (max-width: 760px)"); if (isMobile.matches) { //Conditional script here } });

Soportes del navegador: http://caniuse.com/#feat=matchmedia

La ventaja de este método es que no solo es más simple y más corto, sino que también puede apuntar a diferentes dispositivos, como teléfonos inteligentes y tabletas por separado, si es necesario, sin tener que agregar ningún elemento ficticio al DOM.

Sé que esta pregunta tiene muchas respuestas, pero por lo que vi, nadie se acerca a la respuesta de la forma en que resolvería esto.

CSS utiliza el ancho (Consultas de medios) para determinar qué estilos aplicados al documento web se basan en el ancho. ¿Por qué no usar ancho en el JavaScript?

Por ejemplo, en las consultas de medios de Bootstrap (Mobile First), existen 4 puntos de snap / break:

Dispositivos extra pequeños son 768 píxeles y menos.
Los dispositivos pequeños van desde 768 a 991 píxeles.
Los dispositivos medianos van desde 992 a 1199 píxeles.
Los dispositivos grandes son de 1200 píxeles o más.

Podemos usar esto también para resolver nuestro problema de JavaScript.

Primero, crearemos una función que obtenga el tamaño de la ventana y devuelva un valor que nos permita ver qué tamaño de dispositivo está viendo nuestra aplicación:

var getBrowserWidth = function(){ if(window.innerWidth < 768){ // Extra Small Device return "xs"; } else if(window.innerWidth < 991){ // Small Device return "sm" } else if(window.innerWidth < 1199){ // Medium Device return "md" } else { // Large Device return "lg" } };

Ahora que tenemos la función configurada, podemos llamarla y almacenar el valor:

var device = getBrowserWidth();

Tu pregunta fue

Me gustaría ejecutar un script diferente si el navegador está en un dispositivo de mano.

Ahora que tenemos la información del dispositivo, todo lo que queda es una sentencia if:

if(device === "xs"){ // Enter your script for handheld devices here }

Aquí hay un ejemplo en CodePen: http://codepen.io/jacob-king/pen/jWEeWG

Según Mozilla - Detección de navegador utilizando el agente de usuario :

En resumen, recomendamos buscar la cadena "Mobi" en cualquier parte del Agente de usuario para detectar un dispositivo móvil.

Me gusta esto:

if (/Mobi/.test(navigator.userAgent)) { // mobile! }

Esto coincidirá con todos los agentes de usuario de navegadores móviles comunes, incluyendo Mozilla móvil, Safari, IE, Opera, Chrome, etc.

Actualización para Android

EricL también recomienda probar Android como agente de usuario, ya que la cadena de agente de usuario de Chrome para tabletas no incluye "Mobi" (las versiones de teléfono sí lo hacen):

if (/Mobi|Android/i.test(navigator.userAgent)) { // mobile! }

Si no está especialmente preocupado por las pantallas pequeñas, puede utilizar la detección de ancho / altura. De esa manera, si el ancho está por debajo de un tamaño determinado, se lanza el sitio móvil. Puede que no sea la forma perfecta, pero probablemente será la más fácil de detectar para múltiples dispositivos. Es posible que deba colocar uno específico para el iPhone 4 (resolución grande).

Si por "móvil" te refieres a "pantalla pequeña", uso esto:

var windowWidth = window.screen.width < window.outerWidth ? window.screen.width : window.outerWidth; var mobile = windowWidth < 500;

En iPhone, obtendrás una window.screen.width de 320. En Android terminarás con una window.outerWidth de 480 (aunque eso puede depender del Android). Los iPad y las tabletas de Android devolverán números como 768, de modo que obtendrán la vista completa como usted quisiera.

Si usa Modernizr , es muy fácil usar Modernizr.touch como se mencionó anteriormente.

Sin embargo, prefiero usar una combinación de Modernizr.touch y pruebas de agente de usuario, solo para estar seguro.

var deviceAgent = navigator.userAgent.toLowerCase(); var isTouchDevice = Modernizr.touch || (deviceAgent.match(/(iphone|ipod|ipad)/) || deviceAgent.match(/(android)/) || deviceAgent.match(/(iemobile)/) || deviceAgent.match(/iphone/i) || deviceAgent.match(/ipad/i) || deviceAgent.match(/ipod/i) || deviceAgent.match(/blackberry/i) || deviceAgent.match(/bada/i)); if (isTouchDevice) { //Do something touchy } else { //Can''t touch this }

Si no usa Modernizr, simplemente puede reemplazar la función Modernizr.touch anterior con (''ontouchstart'' in document.documentElement)

También tenga en cuenta que probar el agente de usuario iemobile le iemobile una gama más amplia de dispositivos móviles de Microsoft detectados que Windows Phone .

También vea esta pregunta SO

Te aconsejo que visites http://wurfl.io/

En pocas palabras, si importa un pequeño archivo JavaScript:

<script type=''text/javascript'' src="//wurfl.io/wurfl.js"></script>

Te quedarás con un objeto JSON que se parece a:

{ "complete_device_name":"Google Nexus 7", "is_mobile":true, "form_factor":"Tablet" }

(Eso suponiendo que esté utilizando un Nexus 7, por supuesto) y podrá hacer cosas como:

if(WURFL.is_mobile) { //dostuff(); }

Esto es lo que buscas.

Descargo de responsabilidad: trabajo para la empresa que ofrece este servicio gratuito.

Un sencillo y eficaz de una sola línea:

function isMobile() { return (''ontouchstart'' in document.documentElement); }

Sin embargo, el código anterior no tiene en cuenta el caso de las computadoras portátiles con pantalla táctil. Por lo tanto, proporciono esta segunda versión, basada en la solución @Julian :

function isMobile() { try{ document.createEvent("TouchEvent"); return true; } catch(e){ return false; } }

Utilizar esta:

/** * jQuery.browser.mobile (http://detectmobilebrowser.com/) * jQuery.browser.mobile will be true if the browser is a mobile device **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada//|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)//|plucker|pocket|psp|symbian|treo|up/.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s/-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|/-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw/-(n|u)|c55//|capi|ccwa|cdm/-|cell|chtm|cldc|cmd/-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc/-s|devi|dica|dmob|do(c|p)o|ds(12|/-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(/-|_)|g1 u|g560|gene|gf/-5|g/-mo|go(/.w|od)|gr(ad|un)|haie|hcit|hd/-(m|p|t)|hei/-|hi(pt|ta)|hp( i|ip)|hs/-c|ht(c(/-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i/-(20|go|ma)|i230|iac( |/-|//)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |//)|klon|kpt |kwc/-|kyo(c|k)|le(no|xi)|lg( g|//(k|l|u)|50|54|e/-|e//|/-[a-w])|libw|lynx|m1/-w|m3ga|m50//|ma(te|ui|xo)|mc(01|21|ca)|m/-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(/-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)/-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|/-([1-8]|c))|phil|pire|pl(ay|uc)|pn/-2|po(ck|rt|se)|prox|psio|pt/-g|qa/-a|qc(07|12|21|32|60|/-[2-7]|i/-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55//|sa(ge|ma|mm|ms|ny|va)|sc(01|h/-|oo|p/-)|sdk//|se(c(/-|0|1)|47|mc|nd|ri)|sgh/-|shar|sie(/-|m)|sk/-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h/-|v/-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl/-|tdg/-|tel(i|m)|tim/-|t/-mo|to(pl|sh)|ts(70|m/-|m3|m5)|tx/-9|up(/.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|/-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(/-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(/-|2|g)|yas/-|your|zeto|zte/-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Entonces usa esto:

if(jQuery.browser.mobile) { console.log(''You are using a mobile device!''); } else { console.log(''You are not using a mobile device!''); }

Yo sugeriría usar el siguiente combo de cadenas, para verificar si se usa el tipo de dispositivo.

Según la cadena de documentación de Mozilla, se recomienda Mobi .Pero, algunas de las tabletas antiguas no se vuelven verdaderas si solo Mobise usan, por lo tanto, también deberíamos usar Tabletcadenas.

De manera similar, para estar en el lado seguro iPady las iPhonecadenas también se podrían usar para verificar el tipo de dispositivo.

La mayoría de los nuevos dispositivos volverían solo truepara la Mobicadena.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) { // do something }

También puedes detectarlo como abajo.

$.isIPhone = function(){ return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1)); }; $.isIPad = function (){ return (navigator.platform.indexOf("iPad") != -1); }; $.isAndroidMobile = function(){ var ua = navigator.userAgent.toLowerCase(); return ua.indexOf("android") > -1 && ua.indexOf("mobile"); }; $.isAndroidTablet = function(){ var ua = navigator.userAgent.toLowerCase(); return ua.indexOf("android") > -1 && !(ua.indexOf("mobile")); };

¿Qué hay de mobiledetect.net ?

Otras soluciones parecen demasiado básicas. Esta es una clase de PHP ligero. Utiliza la cadena User-Agent combinada con encabezados HTTP específicos para detectar el entorno móvil. También puede beneficiarse de Mobile Detect utilizando cualquiera de los complementos de terceros disponibles para: WordPress, Drupal, Joomla, Magento, etc.

Función simple basada en http://detectmobilebrowser.com/

function isMobile() { var a = navigator.userAgent||navigator.vendor||window.opera; return /(android|bb/d+|meego).+mobile|avantgo|bada//|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)//|plucker|pocket|psp|series(4|6)0|symbian|treo|up/.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s/-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|/-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw/-(n|u)|c55//|capi|ccwa|cdm/-|cell|chtm|cldc|cmd/-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc/-s|devi|dica|dmob|do(c|p)o|ds(12|/-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(/-|_)|g1 u|g560|gene|gf/-5|g/-mo|go(/.w|od)|gr(ad|un)|haie|hcit|hd/-(m|p|t)|hei/-|hi(pt|ta)|hp( i|ip)|hs/-c|ht(c(/-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i/-(20|go|ma)|i230|iac( |/-|//)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |//)|klon|kpt |kwc/-|kyo(c|k)|le(no|xi)|lg( g|//(k|l|u)|50|54|/-[a-w])|libw|lynx|m1/-w|m3ga|m50//|ma(te|ui|xo)|mc(01|21|ca)|m/-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(/-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)/-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|/-([1-8]|c))|phil|pire|pl(ay|uc)|pn/-2|po(ck|rt|se)|prox|psio|pt/-g|qa/-a|qc(07|12|21|32|60|/-[2-7]|i/-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55//|sa(ge|ma|mm|ms|ny|va)|sc(01|h/-|oo|p/-)|sdk//|se(c(/-|0|1)|47|mc|nd|ri)|sgh/-|shar|sie(/-|m)|sk/-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h/-|v/-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl/-|tdg/-|tel(i|m)|tim/-|t/-mo|to(pl|sh)|ts(70|m/-|m3|m5)|tx/-9|up(/.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|/-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(/-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas/-|your|zeto|zte/-/i.test(a.substr(0,4)); }

Gran respuesta gracias. Pequeña mejora para soportar Windows Phone y Zune:

if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/ZuneWP7/i) ) { // some code self.location="top.htm"; }

Las cadenas de agente de usuario no se deben confiar solo. La solución a continuación funcionará en todas las situaciones.

function isMobile(a) { return (/(android|bb/d+|meego).+mobile|avantgo|bada//|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)//|plucker|pocket|psp|series(4|6)0|symbian|treo|up/.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s/-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|/-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw/-(n|u)|c55//|capi|ccwa|cdm/-|cell|chtm|cldc|cmd/-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc/-s|devi|dica|dmob|do(c|p)o|ds(12|/-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(/-|_)|g1 u|g560|gene|gf/-5|g/-mo|go(/.w|od)|gr(ad|un)|haie|hcit|hd/-(m|p|t)|hei/-|hi(pt|ta)|hp( i|ip)|hs/-c|ht(c(/-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i/-(20|go|ma)|i230|iac( |/-|//)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |//)|klon|kpt |kwc/-|kyo(c|k)|le(no|xi)|lg( g|//(k|l|u)|50|54|/-[a-w])|libw|lynx|m1/-w|m3ga|m50//|ma(te|ui|xo)|mc(01|21|ca)|m/-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(/-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)/-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|/-([1-8]|c))|phil|pire|pl(ay|uc)|pn/-2|po(ck|rt|se)|prox|psio|pt/-g|qa/-a|qc(07|12|21|32|60|/-[2-7]|i/-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55//|sa(ge|ma|mm|ms|ny|va)|sc(01|h/-|oo|p/-)|sdk//|se(c(/-|0|1)|47|mc|nd|ri)|sgh/-|shar|sie(/-|m)|sk/-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h/-|v/-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl/-|tdg/-|tel(i|m)|tim/-|t/-mo|to(pl|sh)|ts(70|m/-|m3|m5)|tx/-9|up(/.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|/-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(/-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas/-|your|zeto|zte/-/i.test(a.substr(0, 4))); }

y llamar a esta función:

isMobile(navigator.userAgent || navigator.vendor || window.opera)

Sabiendo que TouchEventes solo para dispositivos móviles, tal vez la forma más sencilla podría ser verificar si el dispositivo del usuario puede admitirlo:

function isMobile() { try { document.createEvent("TouchEvent"); return true; } catch(e) { return false; } }

Si se encuentra que solo el chequeo navigator.userAgentno siempre es confiable. Mayor confiabilidad se puede lograr también mediante la comprobación navigator.platform. Una simple modificación de una respuesta anterior parece funcionar mejor:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) { // some code... }

Todas las respuestas utilizan user-agent para detectar el navegador, pero la detección de dispositivos basada en user-agent no es una buena solución, mejor es detectar características como dispositivos táctiles (en el nuevo jQuery se eliminan $.browsery usan $.support)

Para detectar móviles puedes verificar eventos táctiles:

function is_touch_device() { return ''ontouchstart'' in window // works on most browsers || ''onmsgesturechange'' in window; // works on ie10 }

Tomado de ¿Cuál es la mejor manera de detectar un dispositivo de ''pantalla táctil'' utilizando JavaScript?

<script> function checkIsMobile(){ if(navigator.userAgent.indexOf("Mobile") > 0){ return true; }else{ return false; } } </script>

Si vas a cualquier navegador y si intentas obtener navigator.userAgent, entonces obtendremos la información del navegador como sigue

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 64.0.3282.186 Safari / 537.36

Lo mismo si lo haces en móvil lo estarás siguiendo.

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36

Cada navegador móvil tendrá un agente de usuario con una cadena que contenga "Móvil". Por lo tanto, estoy usando el fragmento de código anterior en mi código para verificar si el agente del usuario actual es web / móvil. Basado en el resultado estaré haciendo los cambios requeridos.