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


291

¿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?


12
¿Cuenta el iPad? :)
Seva Alekseyev

33
El comentario de Seva plantea una buena pregunta. ¿Qué significa realmente "móvil" hoy? ¿Se refiere a un "teléfono con funciones" que tiene un navegador pero no mucho? ¿Se refiere a teléfonos inteligentes con todas las funciones donde el método de entrada y la resolución de la pantalla son factores limitantes? ¿Qué hay de las tabletas que son fáciles de interactuar y tienen pantallas de alta resolución? ¿Qué tal dispositivos como los centros de medios? Nunca abandonan la sala de estar pero tienen limitaciones similares. Un amigo en el trabajo me envió esto. Lo encontré muy perspicaz. slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
spaaarky21

1
@Ricki, pero en el iPad todavía no puede, por ejemplo, mostrar contenido flash o usar un editor de texto enriquecido basado en JavaScript como tinymce.
TJ Ellis

1
ipad no puede ver flash, pero ese es un tema diferente, como detectar si el navegador admite flash.
Shaun

2
Solo una publicación del futuro, pero cualquier persona interesada en servir una versión móvil de su sitio puede estar interesada en algunos artículos sobre "diseño receptivo".
Vael Victus

Respuestas:


91

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.


3
¿Se puede lograr esto en la capa del servidor web (Apache) a través de algún tipo de comando .htaccess, en lugar de usar un lenguaje de script como PHP?

alguna idea para establecer la raíz del documento por agente de usuario
Carson

126

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


55
@guitar Si ese es el caso, entonces debe enviar su UA.
Adam Tuttle

99
Bleh ... Realmente no me gusta el "olor a código" de estas soluciones. Emparejamiento de expresiones regulares utilizando un puñado de prefijos de 4 caracteres sin tener idea de dónde vinieron originalmente ... no, gracias.
Todos somos Mónica

2
Esa es una declaración de expresión regular. Estoy de acuerdo, el código de olor no es bueno en este caso.
Jack Cox

55
A mí no me gustan las soluciones de "código abierto" sin licencia y sin indicación de actualizaciones.
Eduardo

12
Sin embargo, no hay forma de evitarlo. En algún nivel, cualquier tipo de solución hará una comprobación de expresiones regulares en el agente de usuario.
Kyle

33

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.


3
Esta es una muy buena idea, creo que es una solución elegante.
Maxim Veksler

3
+1 esto suena como una idea bastante dulce, pero ¿afectaría esto a los rastreadores de motores de búsqueda?
Mikey G

Esta es una idea equivocada. Las extensiones de navegador que deshabilitan JavaScript son muy populares en los navegadores de escritorio, por lo que asumir que sin JavaScript significa que el móvil es simplemente incorrecto. La resolución de ventana / vista / pantalla no tiene nada que ver con el tamaño de un navegador, y asumir que una resolución baja indica que el tamaño de la computadora de mano hará que su aplicación web sea fea y frustrante para muchos usuarios. (Por ejemplo: navegadores de escritorio en ventanas que no son de pantalla completa, tabletas grandes.)
ɈsәɹoɈ

31

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.


si desea fusionar sus cuentas, consulte aquí: meta.stackexchange.com/questions/18232/…
Brandon el

Esto no funcionará cuando se trata de tabletas (por ejemplo, iPad)
Si8

Utilice "mobi" debido a Opera Mobile.
mgutt

1
Y necesita "Opera Mini", ya que este es uno de los raros navegadores que no usan "mobi" en el Agente de usuario.
mgutt

17

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.


Es bueno, pero la afirmación "funciona con todas las plataformas principales de programación / lenguaje" es un poco audaz.
Kyle

8
Tampoco es gratis .
MarkJ

Ahora solo está disponible bajo la molesta licencia AGPL, a menos que lo compre. en.wikipedia.org/wiki/WURFL#License_update
MarkJ

17

¿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


1
Creo que esta es la mejor manera de hacerlo. Las secuencias de comandos que examinan las cadenas del Agente de usuario están destinadas a quedar desactualizadas. Ver el espacio disponible en la pantalla permite un diseño receptivo sin preocuparse de que no se detecten nuevos dispositivos.
Adam Tuttle

1
Esto solo funciona para la detección del lado del cliente. Pero si desea que el lado del servidor se comporte de manera diferente para los clientes móviles, deberá utilizar alguna otra técnica.
Igor Brejc

Esto falla miserablemente para los navegadores de escritorio que no se ejecutan a pantalla completa. Si elige hacerlo de todos modos, no desperdicie espacio en la pantalla con enormes fuentes y márgenes, u oculte información / funcionalidad importante detrás de los menús desplegables. Hará que su sitio / aplicación sea feo y frustrante para algunos de sus usuarios.
ɈsәɹoɈ

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>

Encontré esto bastante útil.
bozdoz

¡Definitivamente deberías consultar Conditionizr, que se encargará de todo esto por ti! Puede agregar pruebas personalizadas, buscarlas a través de pruebas de objetos y tener devoluciones de llamada. También tienen una gama de pruebas
prefabricadas

Elenasys, gracias por la respuesta útil. Sin embargo, no puedo encontrar ningún UA que coincida con "windows \ sce" en mi base de datos.
nefski

1
Esto no funciona para teléfonos con Windows.
jwerre

gracias pero no se especificó Windows phone ...
Jorgesys

6

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/


¿Mobile Device Browser sigue funcionando? Me he dado cuenta de que hay una anotación de que se encuentra fuera de línea ...?
creativeedg10

5

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
    }

    });

¡Para una solución más manejable, puede usar Conditionizr que manejará todo esto por usted! Puede agregar pruebas personalizadas, buscarlas a través de pruebas de objetos y tener devoluciones de llamada. También tienen una gama de pruebas
prefabricadas

4

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/


1
Usar .match es incorrecto aquí, desea usar .test () que se evalúa como un valor booleano, también es mucho más rápido que .match () y no devuelve una matriz. Para una solución más manejable para sus pruebas de UserAgent, ¡puede usar Conditionizr, que se encargará de todo esto por usted! Puede agregar pruebas personalizadas, buscarlas a través de pruebas de objetos y tener devoluciones de llamada. También tienen una gama de pruebas
prefabricadas

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

Este ejemplo funciona en asp.net



0

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.


1
¿Se puede lograr esto en la capa del servidor web (Apache) a través de algún tipo de comando .htaccess, en lugar de usar PHP?

0

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!


0

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.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.