Detección automática del navegador móvil (¿a través de user-agent?) [Cerrado]
https://stackoverflow.com/questions/1005153
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Cómo puedo detectar si un usuario está viendo mi sitio web desde un navegador web móvil para poder detectar automáticamente y mostrar la versión adecuada de mi sitio web?
Solución
Sí, leer el encabezado User-Agent hará el truco.
Hay algunas listas out allí de agentes de usuarios móviles conocidos para que no tenga que empezar desde cero. Lo que hice cuando tuve que hacerlo fue construir una base de datos de agentes de usuario conocidos y almacenar datos desconocidos a medida que se detectan para su revisión y luego averiguar de forma manual cuáles son. Esto último podría ser excesivo en algunos casos.
Si desea hacerlo a nivel de Apache, puede crear una secuencia de comandos que genere periódicamente un conjunto de reglas de reescritura que verifiquen el agente de usuario (o solo una vez y olvídese de nuevos agentes de usuario, o una vez al mes, lo que sea más 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 método de hacer que un script vuelva a crear un archivo htaccess periódicamente, puede escribir un módulo que verifique el Agente de usuario (no encontré uno ya hecho, pero encontré que esto es particularmente apropiado example ) y obtenga los agentes de usuario de algunos sitios para actualizarlos. Entonces puede complicar el enfoque tanto como quiera, pero creo que en su caso el enfoque anterior estaría bien.
Otros consejos
Hay scripts de código abierto en Detect Mobile Browser que hacen esto en Apache, ASP, ColdFusion, JavaScript y PHP.
Sólo un pensamiento, pero ¿qué pasaría si resolviera 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 predeterminar a la versión móvil y redirigir a la versión estándar. Hay dos posibilidades básicas al mirar un navegador móvil. O tiene soporte para javascript o no lo tiene. Entonces, si el navegador no tiene soporte para javascript, se establecerá de manera predeterminada en la versión móvil. Si tiene soporte para JavaScript, verifique el tamaño de la pantalla. Cualquier cosa por debajo de un cierto tamaño también será 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 desactivado es móvil o no.
De acuerdo con el W3C, el número de usuarios con JavaScript deshabilitado fue de alrededor del 5% y, de los usuarios, la mayoría lo ha desactivado, lo que implica que realmente saben lo que están haciendo con un navegador. ¿Son una gran parte de su audiencia? Si no, entonces 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 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 la fuente en los teléfonos móviles.
Mi mecanismo favorito de detección del navegador móvil es WURFL . Se actualiza con frecuencia y funciona con todas las principales plataformas de programación / lenguaje.
¿Ha considerado utilizar consultas de medios css3? En la mayoría de los casos, puede aplicar algunos estilos css específicamente para el dispositivo de destino sin tener que crear una versión móvil separada del sitio.
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
Puedes establecer el ancho a lo que quieras, 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 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 de dispositivos móviles es una excelente manera de detectar broswers móviles (y otros) para proyectos ASP.NET: http: //mdbf.codeplex.com/
Puede detectar clientes móviles simplemente a través de navigator.userAgent , y 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
}
});
Puedes verificar la cadena 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 " UserAgent Switcher " plugin para firefox para probar eso.
Si también está interesado, puede valer la pena ver mi script " redirection_mobile.js " alojado en github aquí https://github.com/sebarmeli/JS- Redireccionamiento del sitio móvil y puede leer más detalles en uno de mis artículos aquí:
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í, el agente de usuario se utiliza para detectar navegadores móviles. Hay muchos scripts gratuitos disponibles para verificar esto. Aquí hay uno de estos código php que lo ayudará a redirigir a los usuarios móviles a diferentes sitios web.
Pongo 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 del agente 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 en función de 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 disfrutes!
MobileESP tiene enlaces de PHP, Java, APS.NET (C #), Ruby y JavaScript. También tiene la licencia Apache 2, por lo que es gratis para uso comercial. Lo más importante para mí es que solo identifica los navegadores y las plataformas, no los tamaños de pantalla y otras métricas, lo que hace que sea agradable y pequeño.
Hay una nueva solución que utiliza Zend Framework. Comience desde el enlace a Zend_HTTP_UserAgent:
