Detectar automaticamente o navegador móvel (via user-agent?) [Fechado]


291

Como posso detectar se um usuário está visualizando meu site em um navegador móvel, para que eu possa detectar e exibir automaticamente a versão apropriada do meu site?


12
O iPad conta? :)
Seva Alekseyev

33
O comentário de Seva traz uma boa pergunta. O que "móvel" realmente significa hoje? Refere-se a um "telefone comum" que possui um navegador, mas não muito? Refere-se a smartphones com todos os recursos em que o método de entrada e a resolução da tela são fatores limitantes? E os tablets fáceis de interagir e com telas de alta resolução? Que tal dispositivos como centros de mídia - eles nunca saem da sala, mas têm limitações semelhantes. Um amigo no trabalho me enviou isso. Eu achei muito perspicaz. slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
spaaarky21

1
@ Ricki, mas no ipad você ainda não pode, por exemplo, exibir conteúdo em flash ou usar um editor de rich text baseado em javascript como o tinymce.
TJ Ellis

1
O ipad não pode exibir o flash, mas esse é um tópico diferente, como detectar se o navegador suporta flash.
Shaun

2
Apenas uma publicação do futuro, mas qualquer pessoa interessada em publicar uma versão móvel do site pode estar interessada em alguns artigos sobre "design responsivo".
Vael Victus

Respostas:


91

Sim, ler o cabeçalho User-Agent fará o truque.

Há algumas listas fora lá de agentes de usuários móveis conhecidos, assim você não precisa começar do zero. O que eu fiz quando precisei foi criar um banco de dados de agentes de usuários conhecidos e armazenar incógnitas à medida que são detectados para revisão e depois descobrir manualmente o que são. Essa última coisa pode ser um exagero em alguns casos.

Se você quiser fazer isso no nível do Apache, poderá criar um script que gere periodicamente um conjunto de regras de reescrita verificando o agente do usuário (ou apenas uma vez e esqueça os novos agentes do usuário ou uma vez por mês, o que for mais adequado ao seu caso), como

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

que moveria, por exemplo, solicitações para http: //domain/index.html para http: //domain/mobile/index.html

Se você não gosta da abordagem de ter um script recriado um arquivo htaccess periodicamente, pode escrever um módulo que verifique o User Agent (eu não encontrei um já feito, mas achei este exemplo particularmente apropriado ) e obtenha os agentes do usuário de alguns sites para atualizá-los. Então você pode complicar a abordagem o quanto quiser, mas acho que no seu caso a abordagem anterior seria boa.


3
Isso pode ser feito na camada de servidor da web (Apache) através de algum tipo de comando .htaccess - em vez de usar uma linguagem de script como PHP?

qualquer idéia de conjunto raiz do documento por user-agent
Carson

126

Existem scripts de código aberto no Detect Mobile Browser que fazem isso no Apache, ASP, ColdFusion, JavaScript e PHP.


5
@guitar Se for esse o caso, você deve enviar sua UA.
Adam Tuttle

9
Bleh ... Eu realmente não gosto do "cheiro de código" dessas soluções. Correspondência de expressões regulares usando um monte de prefixos de 4 caracteres sem nenhuma pista sobre a origem original ... não, obrigado.
Estamos todos Monica

2
Essa é uma declaração de regex. Eu concordo, o cheiro do código não é bom neste.
Jack Cox

5
Também não gosto de soluções de "código aberto" sem licença e sem indicação de atualizações.
29411 Eduardo

12
Não há como contornar isso. Em algum nível, qualquer tipo de solução fará uma verificação de regex no agente do usuário.
21412 Kyle

33

Apenas um pensamento, mas e se você resolvesse esse problema na direção oposta? Em vez de determinar quais navegadores são móveis, por que não determinar quais navegadores não são? Em seguida, codifique seu site para usar como padrão a versão móvel e redirecionar para a versão padrão. Existem duas possibilidades básicas ao olhar para um navegador móvel. Ou ele tem suporte a javascript ou não. Portanto, se o navegador não tiver suporte a javascript, ele será padronizado para a versão móvel. Se houver suporte a JavaScript, verifique o tamanho da tela. Qualquer coisa abaixo de um determinado tamanho provavelmente também será um navegador móvel. Qualquer coisa maior será redirecionada para seu layout padrão. Tudo o que você precisa fazer é determinar se o usuário com JavaScript desativado é móvel ou não.
De acordo com o W3C, o número de usuários com JavaScript desativado foi de cerca de 5% e a maioria deles foi desativada, o que implica que eles realmente sabem o que estão fazendo com um navegador. Eles são uma grande parte do seu público? Caso contrário, não se preocupe com eles. Em caso afirmativo, qual é o pior cenário? Você tem esses usuários navegando na versão móvel do seu site, e isso é bom.


3
Essa é uma ideia muito boa, acho que é uma solução elegante.
precisa

3
Marcar com +1 isso parece uma ótima idéia, mas isso afetaria os rastreadores de mecanismo de pesquisa?
Mikey G

Esta é uma ideia equivocada. As extensões de navegador que desativam o javascript são muito populares nos navegadores de desktop, portanto, supondo que nenhum javascript signifique que o celular esteja totalmente errado. A resolução de janela / janela de exibição / tela não tem nada a ver com o tamanho do navegador, e supondo que a baixa resolução indique o tamanho do dispositivo portátil tornará seu aplicativo Web feio e frustrante para muitos usuários. (Por exemplo: navegadores de desktop em windows-de ecrã não completo, grandes tablets.)
ʇsәɹoɈ

31

Aqui está como eu faço isso em JavaScript:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

Veja um exemplo em www.tablemaker.net/test/mobile.html, onde ele triplica o tamanho da fonte em telefones celulares.


se você deseja mesclar suas contas veja aqui: meta.stackexchange.com/questions/18232/...
Brandon

Isso não vai funcionar quando se trata de tablet (por exemplo, iPad)
Si8

Use "mobi" por causa do Opera Mobile.
mgutt

1
E você precisa do "Opera Mini", pois esse é um dos raros navegadores que não usam "mobi" no User Agent.
mgutt

17

Meu mecanismo favorito de detecção de navegador móvel é o WURFL . É atualizado com freqüência e funciona com todas as principais plataformas de programação / linguagem.


É bom, mas a afirmação "funciona com todas as principais plataformas de programação / linguagem" é um pouco ousada.
21412 Kyle


Agora só está disponível sob a licença AGPL, a menos que você a compre. pt.wikipedia.org/wiki/WURFL#License_update
MarkJ 1/01

17

Você já pensou em usar consultas de mídia css3? Na maioria dos casos, você pode aplicar alguns estilos de CSS especificamente ao dispositivo de destino, sem precisar criar uma versão móvel separada do site.

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

Você pode definir a largura como desejar, mas o 1025 capturará a paisagem do iPad.

Você também deseja adicionar a seguinte metatag à sua cabeça:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Confira este artigo em HTML5 Rocks para obter alguns bons exemplos


1
Eu acho que esse é realmente o melhor caminho a percorrer. Os scripts que examinam as strings do User Agent estão destinados a ficar desatualizados. Observar o espaço disponível na tela permite um design responsivo sem a preocupação de novos dispositivos não serem detectados.
Adam Tuttle

1
Isso funciona apenas para detecção do lado do cliente. Mas se você deseja que o lado do servidor se comporte de maneira diferente para clientes móveis, precisará usar alguma outra técnica.
Igor Brejc

Isso falha miseravelmente em navegadores de desktop que não estão sendo executados em tela cheia. Se você optar por fazê-lo de qualquer maneira, não perca espaço na tela com fontes e margens enormes, nem oculte funcionalidades / informações importantes nos menus suspensos. Isso tornará seu site / aplicativo feio e frustrante para alguns de seus usuários.
precisa saber é o seguinte

13

para ANDROID, IPHONE, IPAD, BLACKBERRY, PALM, WINDOWS CE, PALM

 <script language="javascript"> <!--
     var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if (mobile) {
                  alert("MOBILE DEVICE DETECTED");
                  document.write("<b>------------------------------------------<br>")
                  document.write("<b>" + navigator.userAgent + "<br>")
                  document.write("<b>------------------------------------------<br>")
                  var userAgent = navigator.userAgent.toLowerCase();
                  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
                         document.write("<b> ANDROID MOBILE <br>")
                   else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
                       document.write("<b> ANDROID TABLET <br>")
                   else if ((userAgent.search("blackberry") > -1))
                       document.write("<b> BLACKBERRY DEVICE <br>")
                   else if ((userAgent.search("iphone") > -1))
                       document.write("<b> IPHONE DEVICE <br>")              
                   else if ((userAgent.search("ipod") > -1))
                       document.write("<b> IPOD DEVICE <br>")
               else if ((userAgent.search("ipad") > -1))
                       document.write("<b> IPAD DEVICE <br>")
                       else
                   document.write("<b> UNKNOWN DEVICE <br>")
              }
              else
                  alert("NO MOBILE DEVICE DETECTED"); //--> </script>

Achei isso bastante útil.
bozdoz

Você deve definitivamente conferir o Conditionizr, que cuidará de tudo isso para você! Você pode adicionar testes personalizados, buscá-los por meio de testes de objetos e com retornos de chamada. Eles também têm uma variedade de testes pré-fabricados disponíveis: conditionizr.com/detects
Halcyon991

Elenasys, obrigado pela resposta útil. Embora não seja possível encontrar nenhum UA correspondente ao "windows \ sce" no meu banco de dados.
Nefski

1
Isso não funciona para telefones com Windows.
jwerre

obrigado, mas o telefone do Windows não foi especificado ...
Jorgesys

6

O arquivo Mobile Device Browser File é uma ótima maneira de detectar broswers móveis (e outros) para projetos ASP.NET: http://mdbf.codeplex.com/


O Navegador de dispositivos móveis ainda está funcionando? Percebo que existe uma notação sobre o fato de estar offline? ... #
creativeedg10

5

Você pode detectar clientes móveis simplesmente navigator.userAgente carregar scripts alternativos com base no tipo de cliente detectado como:

 $(document).ready(function(e) {

        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)) {

         //write code for your mobile clients here.

          var jsScript = document.createElement("script");
          jsScript.setAttribute("type", "text/javascript");
          jsScript.setAttribute("src", "js/alternate_js_file.js");
          document.getElementsByTagName("head")[0].appendChild(jsScript );

          var cssScript = document.createElement("link");
          cssScript.setAttribute("rel", "stylesheet");
          cssScript.setAttribute("type", "text/css");
          cssScript.setAttribute("href", "css/alternate_css_file.css");
          document.getElementsByTagName("head")[0].appendChild(cssScript); 

    }
    else{
         // write code for your desktop clients here
    }

    });

Para uma solução mais gerenciável, você pode usar o Conditionizr, que cuidará de tudo isso para você! Você pode adicionar testes personalizados, buscá-los por meio de testes de objetos e com retornos de chamada. Eles também têm uma variedade de testes pré-fabricados disponíveis: conditionizr.com/detects
Halcyon991

4

Você pode verificar a seqüência de agente do usuário. No JavaScript, isso é muito fácil, é apenas uma propriedade do objeto navigator.

var useragent = navigator.userAgent;

Você pode verificar se o dispositivo se iPhone ou Blackberry em JS com algo como

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

se isIphone é verdadeiro, você está acessando o site a partir de um Iphone; se isBlackBerry, você está acessando o site a partir de um Blackberry.

Você pode usar o plug-in "UserAgent Switcher" para o firefox para testar isso.

Se você também estiver interessado, pode valer a pena conferir meu script "redirection_mobile.js" hospedado no github aqui https://github.com/sebarmeli/JS-Redirection-Mobile-Site e você pode ler mais detalhes em um destes meu artigo aqui:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/


1
Usar .match está errado aqui, você deseja usar .test () que avalia um valor booleano, também é muito mais rápido que .match () e não retorna uma matriz. Para uma solução mais gerenciável para o teste do userAgent, você pode usar o Conditionizr, que cuidará de tudo isso para você! Você pode adicionar testes personalizados, buscá-los por meio de testes de objetos e com retornos de chamada. Eles também têm uma variedade de testes pré-fabricados disponíveis: conditionizr.com/detects
Halcyon991

4
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

Este exemplo funciona em asp.net



0

Sim user-agent é usado para detectar navegadores móveis. Existem muitos scripts gratuitos disponíveis para verificar isso. Aqui está um desses códigos php que o ajudará a redirecionar usuários móveis para sites diferentes.


1
Isso pode ser feito na camada de servidor da web (Apache) através de algum tipo de comando .htaccess - em vez de usar PHP?

0

Eu coloquei esta demonstração com scripts e exemplos incluídos juntos:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

Este exemplo utiliza funções php para detecção de agente de usuário e oferece o benefício adicional de permitir que os usuários indiquem uma preferência por uma versão do site que normalmente não seria o padrão com base no navegador ou no tipo de dispositivo. Isso é feito com cookies (mantidos usando php no lado do servidor em vez de javascript).

Verifique o link de download no artigo para ver os exemplos.

Espero que goste!


0

O MobileESP possui ganchos PHP, Java, APS.NET (C #), Ruby e JavaScript. Ele também possui a licença Apache 2, portanto gratuita para uso comercial. O principal para mim é que ele identifica apenas navegadores e plataformas, não tamanhos de tela e outras métricas, o que o mantém agradável.


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.