Qual é a melhor maneira de detectar um dispositivo móvel?

1652

Existe uma maneira sólida de detectar se um usuário está ou não usando um dispositivo móvel no jQuery? Algo semelhante ao atributo CSS @media? Gostaria de executar um script diferente se o navegador estiver em um dispositivo portátil.

A $.browserfunção jQuery não é o que estou procurando.

super
fonte
7
Forneça um URL para celular especificamente para dispositivos móveis. É assim que a maioria dos sites principais gerencia dispositivos móveis. Veja m.google.com .
meagar
6
O jQuery não faz e não pode fazer tudo. Ele fornece travessia e manipulação de DOM entre navegadores, animação simples e ajax entre navegadores, e cria uma estrutura básica para os plugins serem construídos. Esteja ciente das limitações do jQuery antes de solicitar especificamente uma solução para o jQuery.
Yi Jiang
78
Os agentes de usuário são constantemente alvos móveis, todos lendo este post deve ter muito cuidado com agente de usuário sniffing
Rob
46
O que é um dispositivo 'móvel'? É um dispositivo que suporta toque (incluindo Chrome Pixels e laptops com Windows 8 com mouse)? É um dispositivo com uma tela pequena (e os iPads de retina)? É um dispositivo com uma CPU lenta? Ou um dispositivo com uma conexão lenta à Internet? Dependendo do que você deseja fazer, a resposta a esta pergunta varia. É fácil segmentar a resolução da tela ou o toque. Se você deseja exibir conteúdo menor ou JS menos intensivo para alguns dispositivos, não há uma bala de prata. Teste a janela window.navigator.connection e volte ao sniffing do userAgent (desagradável, ruim, desaconselhável). Meus 2 centavos.
David Gilbertson
3
@ Cole "Cole9" Johnson Meu ponto exatamente. 'Móvel' parece ser usado como um termo genérico para toque, CPU lenta, rede lenta e tela pequena. Mas nenhuma dessas são suposições perfeitas. Acredito que considerá-los individualmente resultará em um produto melhor do que projetar para um conceito vago de 'móvel'. Daí eu colocar essa pergunta para o OP.
precisa

Respostas:

2028

Nota do editor: a detecção de agente do usuário não é uma técnica recomendada para aplicativos da web modernos. Veja os comentários abaixo desta resposta para confirmação deste fato. É recomendável usar uma das outras respostas usando a detecção de recursos e / ou consultas de mídia.


Em vez de usar o jQuery, você pode usar JavaScript simples para detectá-lo:

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

Ou você pode combinar os dois para torná-lo mais acessível através do jQuery ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Agora $.browserretornará "device"para todos os dispositivos acima

Nota: $.browserremovido no jQuery v1.9.1 . Mas você pode usar isso usando o código de plug-in de migração jQuery


Uma versão mais 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;
}
sweets-BlingBling
fonte
438
A detecção do agente do usuário é uma técnica de detecção muito incómoda, as seqüências do agente do usuário são um alvo em movimento constante, não devem ser confiáveis ​​sozinhas. As pessoas que votaram positivamente neste post devem considerar pesquisar mais.
Rob
65
Um dos problemas com a detecção de apenas dispositivos específicos do agente do usuário é que você deve se lembrar de atualizar sua detecção quando novos dispositivos forem lançados. Esta não é uma solução ideal.
ICodeForCoffee 28/11/2012
11
O navegador Dolphin no Android não envia nenhuma dessas strings!
feeela
88
Se o usuário é bastante astuto ou os desenvolvedores o suficiente idiota para mudar a seqüência do agente do usuário, que se preocupa com eles ...
mattdlockyer
58
Então, como móvel você consideraria uma TV Android com mouse? Quão móvel é um PC com Windows que pode ser executado no modo dual (com teclado ou como tela de toque)? Se você fez isso antes da invenção do iPad, era necessário adicioná-lo posteriormente a todos os seus sites. Próxima OSs saindo: Ubuntu Mobile, Firefox OS, Tizen ....This.Is.A.Bad.Idea.
FrancescoMM
535

Para mim pequeno é lindo, então estou usando esta técnica:

No arquivo CSS:

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

No arquivo 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
    }
 });

Meu objetivo era ter meu site "otimizado para celular". Então, eu uso CSS Media Queries para mostrar / ocultar elementos, dependendo do tamanho da tela.

Por exemplo, na minha versão móvel, não quero ativar o Facebook Like Box, porque ele carrega todas essas imagens de perfil e outras coisas. E isso não é bom para visitantes móveis. Portanto, além de ocultar o elemento container, também faço isso dentro do bloco de código jQuery (acima):

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'));
}

Você pode vê-lo em ação em http://lisboaautentica.com

Ainda estou trabalhando na versão móvel, por isso ainda não está parecendo como deveria, ao escrever isso.

Atualizar por dekin88

Há uma API JavaScript integrada para a detecção de mídia. Em vez de usar a solução acima, basta usar o seguinte:

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

Suporte ao navegador: http://caniuse.com/#feat=matchmedia

A vantagem desse método é que ele não é apenas mais simples e mais curto, mas você pode direcionar condicionalmente diferentes dispositivos, como smartphones e tablets separadamente, se necessário, sem precisar adicionar elementos fictícios no DOM.

Gonçalo Peres
fonte
8
Você não precisa de # algum elemento REALMENTE NO DOM para que isso funcione?
precisa saber é o seguinte
68
-1 A screen.widthpropriedade é global. Não há necessidade de adicionar arbitrariamente um elemento ao DOM e trazer desnecessariamente consultas de mídia CSS. Além disso, se o navegador estiver em uma área de trabalho e o usuário redimensionar a janela, $is_mobilenão será atualizado.
merv
98
Por que não:if( screen.width <= 480 ) { // is mobile }
andrewrjones
23
Os dispositivos Retina dobram o widthvalor do atributo IIRC. Portanto, um iPhone retina terá um widthdos 640e uma altura de 960no retrato, e uma widthde 960uma altura de 640na paisagem.
Cole Johnson
66
Você acabou de reinventar window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
Paul Irish
236

De acordo com o Mozilla - Detecção de navegador usando o agente do usuário :

Em resumo, recomendamos procurar a string "Mobi" em qualquer lugar do User Agent para detectar um dispositivo móvel.

Como isso:

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

Isso corresponderá a todos os agentes comuns de usuários de navegadores móveis, incluindo Mozilla, Safari, IE, Opera, Chrome, etc.

Atualização para Android

EricL recomenda testar Androidtambém como agente de usuário, pois a cadeia de agente de usuário do Chrome para tablets não inclui "Mobi" (as versões do telefone, no entanto):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}
QuasarDonkey
fonte
11
Obrigado pela resposta! Eu prefiro /Mobi/i.test(navigator.userAgent), porém, como test () ele retorna um booleano.
Arminrosu #
5
Paradoxalmente, o FireFox Mobile em um Samsung Galaxy Note 8 não retorna o Mobi e o teste retornará falso.
Eirinn
13
O artigo vinculado menciona: Se o dispositivo for grande o suficiente para não estar marcado com "Mobi", você deverá veicular seu site de desktop (que, como prática recomendada, deve suportar a entrada por toque de qualquer maneira, à medida que mais máquinas de desktop estiverem aparecendo com telas sensíveis ao toque).
precisa saber é o seguinte
2
Isto é muito melhor do que as outras soluções sugeridas, que deve ser a resposta aceita imo
RNobel
9
Derp. Obrigado. Não consegui editar minha postagem anterior. Aqui está novamente:/Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)
EricL 17/04
90

Uma linha simples e eficaz:

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

No entanto, o código acima não leva em consideração o caso de laptops com tela sensível ao toque. Portanto, forneço esta segunda versão, com base na solução @Julian :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}
sequielo
fonte
29
E os laptops Windows com tela sensível ao toque?
precisa
10
A segunda isMobilefunção que você forneceu retorna trueno meu dispositivo de destop !! (Google Chrome v44.0)
Luke
12
Esse é mais um método isTouchSupported, que não é realmente a detecção móvel.
Barkermn01
3
Nem todos os celulares possuem telas sensíveis ao toque.
Andrew
@LukeP Você está atualizando quando passa da emulação móvel para desktop?
Christian4423
81

O que você está fazendo, querendo detectar um dispositivo móvel, está chegando muito perto de um IMO do conceito "browser sniffing". Provavelmente seria muito melhor fazer alguma detecção de recurso. Bibliotecas como http://www.modernizr.com/ podem ajudar com isso.

Por exemplo, onde está a linha entre móvel e não móvel? Fica cada vez mais embaçado todos os dias.

Bart
fonte
3
ainda assim, um usuário pode querer usar o "jquery mobile" para esses dispositivos, quaisquer que sejam os recursos suportados.
Sirber 27/10/11
9
Por exemplo, o meu problema com "mobile" "non-móvel" é minhas características capotamento, tenho JS configurado para desativar os recursos, só precisa detectar
Sam Sussman
4
Ainda assim, se você deseja oferecer um aplicativo para download específico do dispositivo, ele pode ser útil.
Bastes 25/05
3
Depende da situação, estou procurando algo que me diga se o usuário está em um dispositivo móvel, para que eu possa desativar algumas animações pesadas baseadas em JavaScript. A detecção de UA seria muito mais apropriada do que tentar 'detectar' os recursos de desempenho JavaScript do navegador do usuário.
Rick Suggs
9
Celular versus não móvel é uma distinção muito grande, apenas o uso de "detecção de recurso" é estúpido quando você está tentando atender às interações / interface do usuário para uma experiência móvel / desktop. Pessoalmente, gostaria que houvesse uma maneira fácil (e confiável) de obter o sistema operacional em que o navegador atual está sendo executado
nbsp
66

Não é jQuery, mas achei o seguinte: http://detectmobilebrowser.com/

Ele fornece scripts para detectar navegadores móveis em vários idiomas, um dos quais é JavaScript. Isso pode ajudá-lo com o que você está procurando.

No entanto, como você está usando o jQuery, convém estar ciente da coleção jQuery.support. É uma coleção de propriedades para detectar os recursos do navegador atual. A documentação está aqui: http://api.jquery.com/jQuery.support/

Como não sei exatamente o que você está tentando realizar, não sei qual será a mais útil.

Tudo isso dito, acho que sua melhor aposta é redirecionar ou escrever um script diferente para a saída usando uma linguagem do lado do servidor (se isso for uma opção). Como você realmente não conhece os recursos de um navegador móvel x, executar a lógica de detecção e alteração no lado do servidor seria o método mais confiável. Claro, tudo isso é um ponto discutível se você não pode usar um idioma do lado do servidor :)

Ender
fonte
6
que não suporta iPads. Para apoiar iPad, olhar para ip (Hone | od) e "| anúncio" - por exemplo, ip (Hone | od | ad)
Jayson Ragasa
3
Acabei de experimentar o javascript em detectmobilebrowser.com/ e NÃO ESTÁ funcionando para o iPad.
Milche Patern
3
@MilchePatern é porque o script está com defeito, use o iPad em vez do ipad, então funciona, eu tive o problema no meu Samsung Tab, tive que usar o Android iso android :)
Coen Damen
13
Existe uma versão jQuery lá, e funciona perfeitamente, mas para a detecção de tablets, você deve adicionar |android|ipad|playbook|silkconforme descrito na seção about (é por design)
cprcrack
3
Bem, sim, um tablet não é um celular. O site é chamado de navegadores móveis diretos .
Felix Eve
47

Às vezes, é desejável saber qual dispositivo de marca um cliente está usando para mostrar conteúdo específico para esse dispositivo, como um link para a loja do iPhone ou o mercado Android. O modernizador é ótimo, mas mostra apenas os recursos do navegador, como HTML5 ou Flash.

Aqui está minha solução UserAgent no jQuery para exibir uma classe 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 solução é da Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

genkilabs
fonte
Isso funciona muito bem. Eu precisava desativar uma função jQuery que roda na rolagem ao usar um telefone iPad ou Android e, como os vários dispositivos têm larguras de tela diferentes, essa foi uma solução simples. Muito obrigado.
Eric Allen
O único problema com o uso do teste do Android é que sobre o nook que utiliza o agente do usuário android
MayorMonty
Boa resposta, que mostra que não precisamos ser fundamentalistas na detecção de recursos.
Fernando
44

Encontrou uma solução em: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

E, para verificar se é um celular, você pode testar usando:

if(isMobile.any()) {
   //some code...
}
Gabriel
fonte
Uma solução baseada no agente do usuário funciona bem quando você pode ter certeza de que a sub-cadeia está diretamente relacionada ao tipo de dispositivo. ou seja, iPad = iPad. No entanto, agora existem tantos tipos diferentes de dispositivos (mais de 25.000) que a abordagem não é precisa o suficiente para a maioria dos fins comerciais. Eu fundei o projeto de código aberto 51Degrees.com para fornecer uma alternativa confiável e robusta. Funcionará em JavaScript e também no lado do servidor. Toda a documentação está aqui ... 51degrees.com/support/documentation
James Rosewell
Eu usei acima também, e ele estava funcionando bem para mim, mas agora não está funcionando para o Android 5.1 e superior, há algo alterado no Android 5.1 e superior?
Imran Qamer
if (isMobile.Android ()) {document.getElementById ("myAnchor"). setAttribute ("href", " google.com" ); }
Amranur Rahman 23/01/19
25

Se por "celular" você quer dizer "tela pequena", eu uso o seguinte:

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

No iPhone, você terminará com uma window.screen.width de 320. No Android, você terminará com uma window.outerWidth of 480 (embora isso possa depender do Android). Os iPads e tablets Android retornam números como 768 para obter a visualização completa como você deseja.

Chris Moschini
fonte
1
por que 'window.screen.width' não é suficiente? Parece que você está usando o menor de 'window.screen.width' ou 'window.outerWidth'. Por que você se importa com 'outerWidth'? Agradecemos antecipadamente a resposta!
user1330974
16

Se você usa o Modernizr , é muito fácil usar Modernizr.touchcomo mencionado anteriormente.

No entanto, eu prefiro usar uma combinação de Modernizr.touche teste de agente de usuário, apenas por segurança.

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
    }

Se você não usa o Modernizr, pode simplesmente substituir a Modernizr.touchfunção acima por('ontouchstart' in document.documentElement)

Observe também que ao testar o agente do usuário, iemobilevocê terá uma gama mais ampla de dispositivos móveis Microsoft detectados do que Windows Phone.

Veja também esta pergunta do SO

PeterPan
fonte
E o mesmo em Dart: TouchEvent.supported.
Kai Sellgren
('ontouchstart' in window)é uma alternativa para Modernizr.touch, também, hacks.mozilla.org/2013/04/...
JVE999
Eu acho que modernizr é uma ótima solução!
Bobby Russell
Você realmente deve usar o RegEx em |vez de muitas correspondências. Você também não precisa do toLowerCase()porque possui o imodificador. Aqui: var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);
oriadam
14

Você não pode confiar navigator.userAgent, nem todo dispositivo revela seu verdadeiro sistema operacional. No meu HTC, por exemplo, depende das configurações (ligar / desligar a versão móvel). Em http://my.clockodo.com , simplesmente usamos screen.widthpara detectar pequenos dispositivos. Infelizmente, em algumas versões do Android, há um erro no screen.width. Você pode combinar dessa maneira com o 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");
}
Ben H
fonte
8
Muitos celulares têm largura> 1000, especialmente no modo paisagem
oriadam
14

Eu sei que esta pergunta tem muitas respostas, mas pelo que vi, ninguém se aproxima da resposta da maneira que eu resolveria isso.

O CSS usa a largura (Consultas de mídia) para determinar quais estilos aplicados ao documento da Web se baseiam na largura. Por que não usar largura no JavaScript?

Por exemplo, nas consultas de mídia do Bootstrap (Mobile First), existem 4 pontos de snap / break:

  • Os dispositivos extra pequenos têm 768 pixels ou menos.
  • Os dispositivos pequenos variam de 768 a 991 pixels.
  • Os dispositivos médios variam de 992 a 1199 pixels.
  • Os dispositivos grandes têm 1200 pixels ou mais.

Podemos usar isso para também resolver nosso problema de JavaScript.

Primeiro, criaremos uma função que obtém o tamanho da janela e retorna um valor que nos permite ver qual tamanho de dispositivo está visualizando nosso aplicativo:

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"
    }
};

Agora que temos a função configurada, podemos chamá-la e armazenar o valor:

var device = getBrowserWidth();

Sua pergunta foi

Gostaria de executar um script diferente se o navegador estiver em um dispositivo portátil.

Agora que temos as informações do dispositivo, tudo o que resta é uma instrução if:

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

Aqui está um exemplo no CodePen: http://codepen.io/jacob-king/pen/jWEeWG

Jacob King
fonte
Isso funcionou melhor para mim. Como eu estava usando a inicialização para algumas páginas de encaminhamento móvel, essa técnica funcionou bem para redirecionar automaticamente de um encaminhamento não móvel (não inicialização) para uma página de inicialização. Dica: Encontrei um pequeno problema nas ferramentas do IE11 F12: eu tinha a emulação ativada no F12 Dev Tools para um dispositivo móvel e tinha problemas para detectar o tamanho da janela. Eu tinha redimensionado abaixo do ponto de interrupção xs, mas estava detectando como md. Assim que desliguei a emulação de um telefone e atualizei a página, ele detectou corretamente o tamanho e no meu código eu redirecionei para uma página de inicialização.
22816 Jeff Mergler
Ou seja, eu estava procurando por um tempo. Obrigado!
Desenvolvedor
2
@JacobKing você disse Small Devices range from 768 to 991 pixels.isso significa que ele deve ser window.innerWidth < 992(991 está incluído) a mesma coisa para 1199 deve ser <1,200 vez
medBouzid
13

Em uma linha de javascript:

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

Se o agente do usuário contiver 'Mobi' (conforme MDN) e o ontouchstart estiver disponível, é provável que seja um dispositivo móvel.

James Westgate
fonte
1
tinha que /Mobi/.test(navigator.userAgent)... matchnão fez isso por mim
BananaAcid 11/04
12

Estou surpreso que ninguém tenha apontado um site legal: http://detectmobilebrowsers.com/ Ele já criou código em diferentes idiomas para detecção móvel (incluindo, mas não se limitando a):

  • Apache
  • ASP
  • C #
  • IIS
  • Javascript
  • NGINX
  • PHP
  • Perl
  • Pitão
  • Trilhos

E se você precisar detectar os tablets também, basta verificar a seção Sobre para obter mais parâmetros RegEx.

Tablets, iPads, Fires Kindle e PlayBooks Android não são detectados por design. Para adicionar suporte para tablets, adicione |android|ipad|playbook|silkao primeiro regex.

Maksim Luzik
fonte
Para mim, estava funcionando. Você pode ser mais específico: qual código você usa e onde parece haver um problema?
Maksim Luzik
essa página é resposta, de todas as outras respostas são copiadas e coladas dessa página
Rubén Ruíz
11

Se você não estiver particularmente preocupado com telas pequenas, poderá usar a detecção de largura / altura. Dessa forma, se a largura estiver abaixo de um determinado tamanho, o site móvel será exibido. Pode não ser o caminho perfeito, mas provavelmente será o mais fácil de detectar para vários dispositivos. Pode ser necessário inserir um específico para o iPhone 4 (resolução grande).

MoDFoX
fonte
9

Para adicionar uma camada extra de controle, eu uso o armazenamento HTML5 para detectar se ele está usando armazenamento móvel ou de desktop. Se o navegador não suportar armazenamento, tenho uma variedade de nomes de navegadores móveis e comparo o agente do usuário com os navegadores da matriz.

É bem simples. Aqui está a função:

// 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;
}
dotTutoriais
fonte
1
sua suposição com base no localStorage é bastante interessante, você pode fornecer uma variedade de dispositivos ou navegadores suportados que correspondem corretamente ao seu script? Estou interessado em encontrar uma solução para esta questão Eu perguntei, e tentar detectar navegadores mobile-tablet pode realmente ser uma solução interessante
Gruber
9

Se for constatado que apenas verificar navigator.userAgentnem sempre é confiável. Maior confiabilidade pode ser alcançada também verificando navigator.platform. Uma simples modificação em uma resposta anterior parece funcionar melhor:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}
Mark
fonte
5
A votação arbitrária de uma resposta sem deixar um comentário não deve ser permitida. Na melhor das hipóteses, é rude.
Mark
8

Aconselho que você verifique http://wurfl.io/

Em poucas palavras, se você importar um pequeno arquivo JavaScript:

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

Você ficará com um objeto JSON que se parece com:

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

(Isso pressupõe que você esteja usando um Nexus 7, é claro) e poderá fazer coisas como:

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

Isto é o que você está procurando.

Isenção de responsabilidade: trabalho para a empresa que oferece este serviço gratuito.

Luca Passani
fonte
O Wurfl falhou ao detectar o nexus7 e o iPad mini!
Jacob
Algo não está certo no Nexus 7. Você tem certeza de que o Nexus não falsificou a string UA nas configurações? No que diz respeito ao iPad mini, sim, isso é muito difícil de distinguir do outro iPad, mas ainda era reconhecido como um iPad, certo? Foi você que diminuiu o voto no meu post?
Luca Passani #
N, o mini ipad foi detectado como um dispositivo de mesa
Jacob
7

Confira esta postagem , ele fornece um snippet de código muito bom sobre o que fazer quando dispositivos touch são detectados ou o que fazer se o evento touchstart for chamado:

$(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();
}
Safran Ali
fonte
'ontouchstart' in document.documentElementé provavelmente um teste melhor para suporte por toque do que window.Touch. Melhor ainda, use Modernizr.js ( modernizr.com ), porque gastamos muito tempo tentando acertar na detecção de toque. Você pode ver o código de detecção de toque em modernizr.com/downloads/modernizr.js se visualizar o código de desenvolvimento e pesquisar em "touch".
Robocat 13/09/12
3
A detecção de toque me causou problemas, porque alguns novos laptops com Windows 8 são detectados como telas sensíveis ao toque no Chrome, levando a resultados estranhos.
JWarner
6

Aqui está uma função que você pode usar para obter uma resposta verdadeira / falsa sobre se você está executando em um navegador móvel. Sim, é farejador de navegador, mas às vezes é exatamente isso que você precisa.

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;
}
Jonathon Hill
fonte
1
Isso não detectará muitos navegadores móveis, especialmente o Chrome móvel. Ele também irá provavelmente falhar em alguns dos: Opera Mobile, Firefox móvel, Opera Mini, vários populares navegadores móveis chineses, etc etc
robocat
Você não precisa fordisso! + Você esqueceu de criar um RegExp. Aqui está uma mais simples:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))
oriadam 2/15
6

Todas as respostas usam user-agent para detectar o navegador, mas a detecção de dispositivo com base em user-agent não é uma solução muito boa, melhor é detectar recursos como o dispositivo de toque (no novo jQuery, eles removem $.browsere usam$.support ).

Para detectar dispositivos móveis, você pode verificar se há eventos de toque:

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

Retirado de Qual é a melhor maneira de detectar um dispositivo 'touch screen' usando JavaScript?

jcubic
fonte
4
Infelizmente, isso não é confiável e, de qualquer maneira, ele retorna trueem computadores de mesa com telas sensíveis ao toque. stucox.com/blog/you-cant-detect-a-touchscreen
JustAMartin
1
Não esqueça de laptops com telas sensíveis ao toque e experiências completas no navegador. :-)
Mike Kormendy
esse pode não ser o caminho a seguir para verificar se é um dispositivo móvel ou não, mas como o nome da sua função indica, é perfeito verificar se há dispositivos com toque. +1 de mim ;-)
Kathara
6

Eu sugeriria usar o seguinte combo de strings, para verificar se o tipo de dispositivo está sendo usado.

Conforme a documentação da Mozilla, a string Mobié recomendada. Porém, alguns dos tablets antigos não retornam true se Mobiusados apenas , portanto, devemos usarTablet string também.

Da mesma forma, por estar do lado seguro iPadeiPhone cordas também pode ser usado para verificar o tipo de dispositivo.

A maioria dos novos dispositivos retornaria apenas truepara a Mobistring.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}
Sanjay Joshi
fonte
3
Eu tive que adicionar "android" lá para começar a trabalhar em tablets. Vou ter que ajustar, mas gosto da abordagem.
413 Andy
6

Você pode usar a consulta de mídia para poder lidar com isso facilmente.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}
vin
fonte
Eu gosto dessa abordagem, tirei window.matchMedia("(pointer:coarse)").matches;de uma resposta diferente.
Jason Lydon
6

Ótima resposta, obrigado. Pequena melhoria no suporte ao Windows phone e 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";
}
Victor Juri
fonte
Eu diria que esta é a correção mais simples (talvez não a melhor) se você estiver tentando manipular eventos de foco / arrastar para dispositivos móveis. Eu uso algo parecido com isto para criar um booleano "isMobile" que é verificado para cada evento de foco / mouseover. São meus dois centavos, de qualquer maneira. Adicionar mais bibliotecas ou código js que exija interação do usuário não faz muito sentido para mim; me corrija se eu estiver errado.
precisa saber é o seguinte
3
Desde que você está usando expressões regulares, realmente utilizá-los:if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}
foobarbecue
5

Usa isto:

/**  * 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);

Então use isto:

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

Função simples com base em 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));
}
lucasls
fonte
5
<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Se você acessar qualquer navegador e tentar obter navigator.userAgent, obteremos as informações do navegador, como a seguir

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

A mesma coisa, se você faz no celular, estará seguindo

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

Todos os navegadores móveis terão useragent com uma string contendo "Mobile". Por isso, estou usando o snippet acima no meu código para verificar se o agente atual do usuário é web / mobile. Com base no resultado, farei as alterações necessárias.

Vishnu Prasanth G
fonte
4

Eu uso isso

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}
Yene Mulatu
fonte
4

Que tal mobiledetect.net ?

Outras soluções parecem muito básicas. Esta é uma classe PHP leve. Ele usa a sequência User-Agent combinada com cabeçalhos HTTP específicos para detectar o ambiente móvel. Você também pode se beneficiar do Mobile Detect usando qualquer um dos plug-ins de terceiros disponíveis para: WordPress, Drupal, Joomla, Magento, etc.

Luca Mori Polpettini
fonte
Porque a pergunta feita pelo jQuery?
Craicerjack
3

As strings do agente do usuário não devem ser confiáveis ​​sozinhas. A solução abaixo funcionará em todas as situações.

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)));
}

e chame esta função:

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