html - useragent - Detección automática del navegador móvil(¿a través de user-agent?)
user-agent header (16)
¿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%;
}
}
Puede configurar el ancho a lo que desee, pero 1025 capturará la vista horizontal del iPad.
También querrá agregar la siguiente etiqueta meta a su cabeza:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Echa un vistazo a este artículo en HTML5 Rocks para ver algunos buenos ejemplos.
¿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?
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.
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/
Hay scripts de código abierto en Detect Mobile Browser que hacen esto en Apache, ASP, ColdFusion, JavaScript y PHP.
Hay una nueva solución que usa Zend Framework. Comience desde el enlace a Zend_HTTP_UserAgent:
Mi mecanismo de detección de navegador móvil favorito es WURFL . Se actualiza con frecuencia y funciona con todas las plataformas principales de programación / lenguaje.
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
}
Pongo esta demo 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 agente de usuario y ofrece la ventaja 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!
Puede comprobar 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 el complemento "UserAgent Switcher" 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-Redirection-Mobile-Site y puede leer más detalles en uno de mi artículo aquí:
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
}
});
Sí, leer el encabezado User-Agent hará el truco.
Hay algunas lists de agentes de usuarios móviles conocidos, por lo que no es necesario comenzar desde cero. Lo que hice cuando tuve que hacerlo fue construir una base de datos de agentes de usuarios 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 una exageración 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 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é este example particularmente apropiado) y obtener 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.
Sí, user-agent se utiliza para detectar navegadores móviles. Hay muchos scripts gratuitos disponibles para verificar esto. Aquí hay un código php que lo ayudará a redirigir a los usuarios móviles a diferentes sitios web.
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. Por lo tanto, si el navegador no tiene soporte para javascript, se establecerá de manera predeterminada 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 esos usuarios, la mayoría lo han 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.
MobileESP tiene PHP, Java, APS.NET (C #), Ruby y JavaScript enganches. También tiene la licencia Apache 2, por lo que es gratis para uso comercial. Lo 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.
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>
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
Este ejemplo funciona en asp.net.