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

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?

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.

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

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.

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.

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.

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

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>

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

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
    }

    });

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/

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

Este exemplo funciona em asp.net

Você não disse qual idioma está usando. Se é Perl, então é trivial:

use CGI::Info;

my $info = CGI::Info->new();

if($info->is_mobile()) {
   # Add mobile stuff
}

unless($info->is_mobile()) {
   # Don't do some things on a mobile
}

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.

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!

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.

Há uma nova solução usando o Zend Framework. Comece pelo link para Zend_HTTP_UserAgent:

http://framework.zend.com/manual/en/zend.http.html