Detección automática del navegador móvil (a través del agente de usuario) [cerrado]

¿Cómo puedo detectar si un usuario está viendo mi sitio web desde un navegador web móvil para poder detectar y mostrar automáticamente la versión adecuada de mi sitio web?

Sí, leer el encabezado User-Agent hará el truco.

Hay algunas listas fuera allí de los agentes de usuario móviles conocidos por lo que no tiene que empezar de cero. Lo que hice cuando tuve que hacer fue crear una base de datos de agentes de usuario conocidos y almacenar incógnitas a medida que se detectan para su revisión y luego descubrir manualmente cuáles son. Esto último puede ser excesivo en algunos casos.

Si desea hacerlo a nivel de Apache, puede crear un script que genere periódicamente un conjunto de reglas de reescritura que verifiquen el agente de usuario (o solo una vez y se olviden de los nuevos agentes de usuario, o una vez al mes, lo que sea adecuado para su caso), como

RewriteEngine On

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

que movería, por ejemplo, las solicitudes a http: //domain/index.html a http: //domain/mobile/index.html

Si no le gusta el enfoque de tener un script que recrea un archivo htaccess periódicamente, puede escribir un módulo que verifique el Agente de usuario (no encontré uno ya creado, pero encontré este ejemplo particularmente apropiado ) y obtuve los agentes de usuario de algunos sitios para actualizarlos. Entonces puede complicar el enfoque tanto como desee, pero creo que en su caso el enfoque anterior estaría bien.

Hay scripts de código abierto en Detect Mobile Browser que hacen esto en Apache, ASP, ColdFusion, JavaScript y PHP.

Solo un pensamiento, pero ¿qué pasa si resolviste este problema desde la dirección opuesta? En lugar de determinar qué navegadores son móviles, ¿por qué no determinar qué navegadores no lo son? Luego codifique su sitio para que sea predeterminado a la versión móvil y redirija a la versión estándar. Hay dos posibilidades básicas al mirar un navegador móvil. O tiene soporte de JavaScript o no. Por lo tanto, si el navegador no tiene soporte para javascript, la versión móvil será predeterminada. Si tiene soporte para JavaScript, verifique el tamaño de la pantalla. Cualquier cosa por debajo de cierto tamaño probablemente también sea un navegador móvil. Cualquier cosa más grande será redirigida a su diseño estándar. Entonces, todo lo que necesita hacer es determinar si el usuario con JavaScript deshabilitado es móvil o no.
Según el W3C, el número de usuarios con JavaScript deshabilitado era de aproximadamente el 5% y la mayoría de los usuarios lo han desactivado, lo que implica que realmente saben lo que están haciendo con un navegador. ¿Son una gran parte de tu audiencia? Si no, no te preocupes por ellos. Si es así, ¿cuál es el peor de los casos? Tienes a esos usuarios navegando en la versión móvil de tu sitio, y eso es algo bueno.

Así es como lo hago en JavaScript:

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

Vea un ejemplo en www.tablemaker.net/test/mobile.html donde triplica el tamaño de fuente en los teléfonos móviles.

Mi mecanismo de detección de navegador móvil favorito es WURFL . Se actualiza con frecuencia y funciona con todas las principales plataformas de programación / lenguaje.

¿Ha considerado usar consultas de medios css3? En la mayoría de los casos, puede aplicar algunos estilos css específicamente para el dispositivo objetivo sin tener que crear una versión móvil separada del sitio.

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

Puede establecer el ancho a lo que desee, pero 1025 capturará la vista horizontal del iPad.

También querrás agregar la siguiente metaetiqueta a tu cabeza:

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

Consulte este artículo en HTML5 Rocks para ver algunos buenos ejemplos

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>

El archivo del navegador del dispositivo móvil es una excelente manera de detectar dispositivos de almacenamiento móviles (y otros) para proyectos ASP.NET: http://mdbf.codeplex.com/

Puede detectar clientes móviles simplemente a través navigator.userAgenty cargar scripts alternativos basados ​​en el 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
    }

    });

Puede verificar la cadena de User-Agent. En JavaScript, eso es realmente fácil, es solo una propiedad del objeto navegador.

var useragent = navigator.userAgent;

Puede verificar si el dispositivo es iPhone o Blackberry en JS con algo como

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

si isIphone es cierto, está accediendo al sitio desde un iPhone, si isBlackBerry está accediendo al sitio desde un Blackberry.

Puede usar el complemento "UserAgent Switcher" para firefox para probar eso.

Si también está interesado, puede valer la pena revisar mi script "redirection_mobile.js" alojado en github aquí https://github.com/sebarmeli/JS-Redirection-Mobile-Site y puede leer más detalles en uno de mi artículo aquí:

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 ejemplo funciona en asp.net

No has dicho qué idioma estás usando. Si es Perl, entonces es 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
}

Sí, user-agent se utiliza para detectar navegadores móviles. Hay muchos scripts gratuitos disponibles para verificar esto. Aquí hay uno de esos códigos php que lo ayudará a redirigir a los usuarios móviles a diferentes sitios web.

Puse esta demostración con scripts y ejemplos incluidos juntos:

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

Este ejemplo utiliza funciones php para la detección de agentes de usuario y ofrece el beneficio adicional de permitir que los usuarios establezcan una preferencia por una versión del sitio que normalmente no sería la predeterminada según su navegador o tipo de dispositivo. Esto se hace con cookies (mantenidas usando php en el lado del servidor en lugar de javascript).

Asegúrese de revisar el enlace de descarga en el artículo para ver los ejemplos.

¡Espero que lo disfrutes!

MobileESP tiene ganchos PHP, Java, APS.NET (C #), Ruby y JavaScript. También tiene la licencia Apache 2, de forma gratuita para uso comercial. Lo clave para mí es que solo identifica navegadores y plataformas, no tamaños de pantalla y otras métricas, lo que lo mantiene agradable y pequeño.

Hay una nueva solución con Zend Framework. Comience desde el enlace a Zend_HTTP_UserAgent:

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