javascript - useragent - verificar se é mobile ou desktop




Qual é a melhor maneira de detectar um dispositivo móvel no jQuery? (20)

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

Aqui está a 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 é de Maníacos Gráficos http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

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

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


Aqui está uma função que você pode usar para obter uma resposta verdadeira / falsa para saber se está sendo executado em um navegador para dispositivos móveis. Sim, é sniffing de navegador, mas às vezes é exatamente o 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;
}

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

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

Como isso:

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

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

Atualização para o Android

A EricL também recomenda o teste para o Android como agente do usuário, pois a string do agente do usuário do Google Chrome para tablets não inclui "Mobi" (no entanto, as versões do telefone):

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

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 ontouchstart estiver disponível, é provável que seja um dispositivo móvel.


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 então, para verificar se é um celular, você pode testar usando:

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

Estou surpreso que ninguém apontou um bom site: http://detectmobilebrowsers.com/ Ele tem código pronto em diferentes idiomas para detecção móvel (incluindo mas não limitado a):

  • Apache
  • ASP
  • C #
  • IIS
  • JavaScript
  • NGINX
  • PHP
  • Perl
  • Python
  • Trilhos

E se você precisar detectar os tablets também, apenas marque a seção Sobre para obter o parâmetro RegEx adicional.

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


Eu sei que esta pergunta tem muitas respostas, mas pelo que vi ninguém aborda a resposta do jeito que eu resolveria.

O CSS usa largura (Consultas de Mídia) para determinar quais estilos aplicados ao documento da Web são baseados 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:

  • Extra Small Devices tem 768 pixels ou menos.
  • Dispositivos pequenos variam de 768 a 991 pixels.
  • Dispositivos médios variam de 992 a 1199 pixels.
  • Os dispositivos grandes são de 1200 pixels ou mais.

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

Primeiro, criaremos uma função que obtenha o tamanho da janela e retorne um valor que nos permita ver qual dispositivo de tamanho 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

Eu 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 declaraçã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


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

Ele fornece scripts para detectar navegadores móveis em vários idiomas, um dos quais é o 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 deles será o mais útil.

Tudo o que foi dito, eu acho que sua melhor aposta é redirecionar ou escrever um script diferente para a saída usando uma linguagem do lado do servidor (se isso é uma opção). Como você não conhece realmente os recursos de um navegador móvel x, fazer a detecção e a lógica de 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 uma linguagem do lado do servidor :)


Para adicionar uma camada extra de controle, uso o armazenamento HTML5 para detectar se ele está usando o armazenamento móvel ou o armazenamento da área de trabalho. Se o navegador não suportar armazenamento, eu tenho uma matriz 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;
}

Para mim pequeno é lindo então estou usando essa 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 "mobile friendly". Então eu uso CSS Consultas de Mídia mostram / ocultam elementos dependendo do tamanho da tela.

Por exemplo, na minha versão para celular, eu não quero ativar o Facebook Like Box, porque ele carrega todas aquelas imagens de perfil e outras coisas. E isso não é bom para os visitantes em dispositivos móveis. Então, além de esconder o elemento container, eu 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 para dispositivos móveis, por isso ainda não está parecendo como deveria, ao escrever isso.

Atualização de dekin88

Existe uma API JavaScript embutida para detectar mídia. Em vez de usar a solução acima, basta usar o seguinte:

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

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

Suportes para navegadores: http://caniuse.com/#feat=matchmedia

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


Se você não estiver particularmente preocupado com monitores pequenos, poderá usar a detecção de largura / altura. Dessa forma, se a largura estiver abaixo de um determinado tamanho, o site para dispositivos móveis será lançado. Pode não ser o caminho perfeito, mas provavelmente será o mais fácil de detectar para vários dispositivos. Você pode precisar colocar em um específico para o iPhone 4 (resolução grande).


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

No entanto, eu prefiro usar uma combinação de Modernizr.touch e teste de agente de usuário, apenas 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
    }

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

Observe também que o teste do agente do usuário iemobile fornecerá a você uma gama mais ampla de dispositivos móveis da Microsoft detectados do que o Windows Phone .

Veja também esta questão SO


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

Você não pode confiar no navigator.userAgent , nem todo dispositivo revela seu sistema operacional real. No meu HTC por exemplo, isso depende das configurações ("usando a versão móvel" on / off). Em http://my.clockodo.com , nós simplesmente usamos screen.width para detectar pequenos dispositivos. Infelizmente, em algumas versões do Android há um bug com 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");
}

Você também pode detectá-lo como abaixo

$.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"));
};

Ótima resposta obrigado. Pequena melhoria para suportar o Windows phone e o 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";
               }

Como cerca de mobiledetect.net ?

Outras soluções parecem muito básicas. Esta é uma classe PHP leve. Ele usa a string 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 plugins de terceiros disponíveis para: WordPress, Drupal, Joomla, Magento, etc.


Função simples baseada 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));
}

Se descobrir que apenas verificar navigator.userAgentnem sempre é confiável. Maior confiabilidade pode ser alcançada verificando também navigator.platform. Uma simples modificação para 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...
}

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

Para detectar dispositivos móveis, você pode verificar 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?







browser-detection