javascript - que - Detectar un navegador móvil

que es javascript pdf (30)

Estoy buscando una función que devuelva valor booleano si el usuario tiene un navegador móvil o no.

Sé que puedo usar navigator.userAgent y escribir esa función usando expresiones regulares, pero los agentes de usuario son demasiado diferentes para diferentes plataformas. Dudo que igualar todos los dispositivos posibles sería fácil, y creo que este problema se resolvió muchas veces, por lo que debería haber algún tipo de solución completa para esa tarea.

Estaba mirando detectmobilebrowsers.com , pero lamentablemente el script es tan críptico que no tengo idea de cómo usarlo para mi propósito, que es crear una función que devuelva verdadero / falso.

Usando Regex (desde detectmobilebrowsers.com ):

Aquí hay una función que utiliza un regex increíblemente largo y completo que devuelve un valor verdadero o falso dependiendo de si el usuario está navegando con un móvil o no.

window.mobilecheck = function() { var check = false; (function(a){if(/(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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; };

Para aquellos que deseen incluir tabletas en esta prueba (aunque podría decirse que no debería), puede usar la siguiente función:

window.mobileAndTabletcheck = function() { var check = false; (function(a){if(/(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|android|ipad|playbook|silk/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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; };

La respuesta original

Puede hacer esto simplemente ejecutando una lista de dispositivos y verificando si el agente de usuario coincide con algo como esto:

function detectmob() { 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/i) || navigator.userAgent.match(/Windows Phone/i) ){ return true; } else { return false; } }

Sin embargo, dado que cree que este método no es confiable, podría asumir que cualquier dispositivo que tuviera una resolución de 800x600 o menos también era un dispositivo móvil, reduciendo su objetivo aún más (aunque en estos días muchos dispositivos móviles tienen resoluciones mucho mayores que esto)

es decir

function detectmob() { if(window.innerWidth <= 800 && window.innerHeight <= 600) { return true; } else { return false; } }

Referencia:

Detección de navegador y dispositivos con javascript

¿Qué tal algo como esto?

if( (screen.width <= 640) || (window.matchMedia && window.matchMedia(''only screen and (max-width: 640px)'').matches ) ){ // Do the mobile thing }

Aquí está la función completa.

function isMobile(){ return (/(android|bb/d+|meego).+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|series(4|6)0|symbian|treo|up/.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/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||navigator.vendor||window.opera).substr(0,4))) } jQuery.noConflict(); jQuery(document).ready(function(){ if(isMobile()) alert("Mobile"); else alert("Not Mobile"); });

Aquí está mi solución repensada para el problema. Todavía no es perfecto. La única solución verdadera sería si los fabricantes de dispositivos comienzan a tomar en serio las cadenas de agente de usuario "Móvil" y "Tableta".

¿Qué sucede cuando la tableta Nexus 7 solo tiene la cadena UA de Android? Primero, el Mobile se convierte en verdadero, y luego en el Tablet, también se convierte en verdadero, pero el Tablet eliminará la cadena de Mobile UA de la etiqueta del cuerpo.

CSS:

body.tablet { background-color: green; } body.mobile { background-color: red; }

Líneas de alert añadidas para desarrollo. La consola de Chrome puede emular muchos dispositivos de mano. Prueba allí.

EDITAR:

Simplemente no uses esto, usa la detección de características en su lugar. Existen tantos dispositivos y marcas que apuntar a una marca NUNCA será la solución correcta.

Aquí hay una solución de UserAgent que es más eficiente que la coincidencia ...

function _isMobile(){ // if we want a more complete list use this: http://detectmobilebrowsers.com/ // str.test() is more efficent than str.match() // remember str.test is case sensitive var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test (navigator.userAgent.toLowerCase()); return isMobile; }

Aquí hay una solución simple de la fuente de la catapulta de Facebook.

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); if (isMobile) { /* your code here */ }

Como muchos han afirmado, confiar en el objetivo móvil de los datos del agente de usuario es problemático. Lo mismo se puede decir para contar con el tamaño de la pantalla. Mi enfoque está tomado de una técnica CSS para determinar si la interfaz es táctil. Usando javascript puro (compatible con todos los navegadores modernos), una consulta de medios que puede determinar fácilmente cuando el dispositivo es móvil.

function isMobile() { if(typeof window.matchMedia != ''undefined'' || typeof window.msMatchMedia != ''undefined'') { var mq = window.matchMedia("(pointer:coarse)"); return mq.matches; } return false; }

De acuerdo con el artículo de MDN sobre la detección del navegador que utiliza el agente de usuario , se recomienda evitar este enfoque si es posible y sugerir otras vías, como la detección de características.

Sin embargo, si uno debe usar el agente de usuario como un medio para detectar si el dispositivo es móvil, sugieren:

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

Por lo tanto, esta frase será suficiente:

const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");

Hay un simple truco para detectar si es un dispositivo móvil o no. Solo verifica si existe el evento uponuchstart :

function isMobile() { return "ontouchstart" in window; }

Heres un forro

function isMobile() { return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf(''IEMobile'') !== -1); };

La detección de funciones es mucho mejor que intentar averiguar qué dispositivo está usando y es muy difícil mantenerse al día con los nuevos dispositivos que salen todo el tiempo, una biblioteca como Modernizr informa si una característica en particular está disponible o no.

Lo mejor debe ser:

var isMobile = (/Mobile/i.test(navigator.userAgent));

Pero como dice Yoav Barnea ...

// Seem legit var isMobile = (''DeviceOrientationEvent'' in window || ''orientation'' in window); // But with my Chrome on windows, DeviceOrientationEvent == fct() if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false; // My android have "linux" too if (/Mobile/i.test(navigator.userAgent)) isMobile = true;

Después de estas 3 pruebas, espero que var isMobile sea ... ok

No hay una solución perfecta para detectar si el código JS se ejecuta en un navegador móvil, pero las siguientes dos opciones deberían funcionar en la mayoría de los casos.

Opción 1: rastreo del navegador

Este código de rastreo del navegador en particular es el de una biblioteca llamada isMobile .

Opción 2: window.orientation

Probar si se define window.orientation :

var isMobile = window.orientation > -1; alert(isMobile ? ''Mobile'' : ''Not mobile'');

Nota

No todos los dispositivos con pantalla táctil son móviles y viceversa. Por lo tanto, si desea implementar algo específicamente para la pantalla táctil, no debe probar si su navegador se ejecuta en un dispositivo móvil, sino si los dispositivos son compatibles con la pantalla táctil:

var hasTouchscreen = ''ontouchstart'' in window; alert(hasTouchscreen ? ''has touchscreen'' : ''doesn/'t have touchscreen'');

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 var mobile = [''iphone'',''ipad'',''android'',''blackberry'',''nokia'',''opera mini'',''windows mobile'',''windows phone'',''iemobile'']; for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true; // nothing found.. assume desktop return false; }

Qué tal si:

if (typeof window.orientation !== ''undefined'') { ... }

... ya que los teléfonos inteligentes generalmente admiten esta propiedad y los navegadores de escritorio no.

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

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

<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 es asumiendo que estás usando un Nexus 7, por supuesto) y podrás hacer cosas como:

if(WURFL.form_factor == "Tablet"){ //dostuff(); }

Esto es lo que buscas.

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

Una forma realmente buena de detectar dispositivos móviles o tabletas es ver si el navegador puede crear un evento táctil.

Código JavaScript simple:

function isMobile() { try{ document.createEvent("TouchEvent"); return true; } catch(e){ return false; } } if (isMobile()) { # do whatever you wanna do! }

Esto me funcionó muy bien, pero puede haber un problema con los dispositivos portátiles que incluyen una pantalla táctil.

No estoy seguro de si una computadora portátil con pantalla táctil se detectará como un dispositivo móvil porque todavía no la he probado.

Una vez que el elemento se enfoca, inmediatamente lo borras. Bootstrap-datepicker, que es un componente muy popular y bien mantenido con casi 10,000 estrellas en GitHub, utiliza este enfoque:

if (window.navigator.maxTouchPoints || ''ontouchstart'' in document) { this.input.blur(); }

https://github.com/uxsolutions/bootstrap-datepicker

Gracias a share por su ayuda.

Vine aquí en busca de una forma simple y limpia de detectar "dispositivos de pantallas táctiles", que clasifico como móviles y tabletas. No encontró una opción limpia en las respuestas actuales, pero resolvió lo siguiente que también puede ayudar a alguien.

var touchDevice = (''ontouchstart'' in document.documentElement);

Edición : para admitir escritorios con una pantalla táctil y móviles al mismo tiempo, puede usar lo siguiente:

var touchDevice = (navigator.maxTouchPoints || ''ontouchstart'' in document.documentElement);

¿Qué hay de usar "window.screen.width"?

if (window.screen.width < 800) { // do something }

if($(window).width() < 800) { //do something }

¡Supongo que esta es la mejor manera porque hay un nuevo dispositivo móvil cada día!

(aunque creo que no es compatible con los navegadores antiguos, pero inténtalo :))

Aquí hay una solución ECMAScript 6 (compatible con TypeScript)

public isMobile(): boolean { let check = false; ((a => { if (/(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))) check = true; }))(navigator.userAgent || navigator.vendor); return check; }

En cualquier caso, la verificación del tipo de dispositivo debe llamarse UNA SOLA VEZ: su teléfono no puede sorprendentemente quedarse en una computadora de escritorio en un momento

Por lo tanto, el código para verificar por el agente de usuario, sugerido aquí hace algún tiempo, debe ser así:

Esto también podría ser una solución.

Si utiliza ambos métodos, obtendrá una forma perfecta de detectar diferentes dispositivos.

Si está buscando un teléfono móvil, ya que en la mayoría de los casos están orientados a la imagen, puede utilizar esta sencilla comprobación:

if ($(window).width() > $(window).height()) alert(''Landscape''); // usually tablet or desktop else alert(''Portrait''); // usually mobile phone

NOTA: esta no es una solución confiable, ¡pero funcionará en la mayoría de los casos!

return ''ontouchstart'' in window && window.screen.availWidth < 768

¿Qué tal esto, se expande en la respuesta anterior pero también comprueba el tamaño de la pantalla?

Esto es solo un puerto es6 de la share que estoy usando en mi proyecto. Tenga en cuenta que esto también incluye tabletas.

export const isMobile = () => { const vendor = 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|xda|xiino|android|ipad|playbook|silk/i.test( vendor ) || /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( vendor.substr(0, 4) ) ); };

Por lo general, me parece que el enfoque más simple de verificar la visibilidad de un elemento en particular (por ejemplo, el icono de la hamburguesa) que solo es visible en las vistas móviles funciona bien y es mucho más seguro que confiar en una expresión regular muy complicada. Eso sería difícil de probar funciona al 100%.

function isHidden(el) { return (el.offsetParent === null); }

Tenga en cuenta que la mayoría de los dispositivos móviles de nueva generación ahora tienen resoluciones superiores a 600x400. Es decir, un iPhone 6 ....

Prueba de prueba: se ejecutaron las publicaciones más actualizadas y las más recientes aquí, con una comprobación opcional una vez que se ejecuta así:

De alguna manera, los siguientes resultados fueron devueltos en las siguientes aplicaciones del navegador. Especificaciones: iPhone 6S, iOS 10.3.1.

Safari (más reciente): Lo detectó como un móvil.

Chrome (más reciente): No lo detecté como móvil.

Entonces, probé la sugerencia de ( https://.com/a/31864119/7183483 ), y devolvió los resultados correctos (móvil para todos los dispositivos iOS y escritorio para mi Mac). Por lo tanto, procedí a editarlo un poco, ya que se dispararía dos veces (para dispositivos móviles y tabletas). Luego, cuando probé en un iPad, noté que también regresaba como un móvil, lo cual tiene sentido, ya que los Parámetros que Utiliza el sistema operativo más que nada. Por lo tanto, simplemente moví la declaración IF de la tableta dentro de la comprobación móvil, que devolvería móvil si la comprobación de la tableta fue negativa, y la tableta de lo contrario. Luego agregué la cláusula else para que el cheque móvil regrese como computadora de escritorio / portátil, ya que ambos califican, pero luego noté que el navegador detecta la marca de CPU y SO. Así que agregué lo que se devuelve allí como parte de la instrucción if en su lugar. Para colmo, agregué una declaración de advertencia en caso de que no se detectara nada. Vea a continuación, se actualizará con una prueba en una PC con Windows 10 pronto.

Ah, y también agregué una variable ''debugMode'', para cambiar fácilmente entre la depuración y la compilación normal.

Descargo de responsabilidad: crédito completo para , además, esto no se probó en tabletas de Windows ... que pueden devolver computadora de escritorio / portátil, ya que el sistema operativo es Windows puro. Lo comprobaré una vez que encuentre un amigo que usa uno.

//true / false function isMobile() { return (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ); }

También puedes seguir este tutorial para detectar un móvil específico. Haga clic here .

Cómo utilizar

if( isMobile.any() ) alert(''Mobile'');

Para verificar si el usuario está en un dispositivo móvil específico:

if( isMobile.iOS() ) alert(''iOS'');

Ref: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript

Versión mejorada en github: https://github.com/smali-kazmi/detect-mobile-browser