Cómo detectar los dispositivos móviles con los que se accede a un sitio web
Lógicamente no se puede usar Javascript para este fin, porque gran parte de estos dispositivos no admite este lenguaje, la solución puede ser lenguajes de servidor como PHP, para detectar los dispositivos por su agente de usuario o utilizar Javascript en el código HTML a sabiendas que gran parte de los teléfonos más antiguos no podrán acceder a dicha página.
Script para detectar dispositivos móviles y redirigirlos a un directorio
El siguiente script en lenguaje PHP, insertado al comienzo de una página index.php, re-direccionará a los dispositivos móviles cuyos agentes de usuario se especifiquen, a un directorio llamado en este ejemplo mobile, que contiene las versiones optimizadas para estos dispositivos.
En este ejemplo se especifican solo tres agentes de usuario (iphone, ipad y kindle), pero se pueden usar varios.
Los navegadores estándar continuaran leyéndo el resto de la página original.
La gran desventaja de su uso es la gran cantidad de dispositivos con agentes de usuarios diferentes, que incluso crece más cada día que pasa. Además se necesitarían versiones duplicadas de cada página.
<?php
$navigator_user_agent = (isset($_SERVER['HTTP_USER_AGENT'])) ? strtolower($_SERVER['HTTP_USER_AGENT']):'';
if(
stristr($navigator_user_agent, "iphone")or
stristr($navigator_user_agent, "ipad")or
stristr($navigator_user_agent, "kindle")
)
{
header("Location: mobile/index.html");
}
?>
<html>
Resto del código fuente de la página
</html>
$navigator_user_agent = (isset($_SERVER['HTTP_USER_AGENT'])) ? strtolower($_SERVER['HTTP_USER_AGENT']):'';
if(
stristr($navigator_user_agent, "iphone")or
stristr($navigator_user_agent, "ipad")or
stristr($navigator_user_agent, "kindle")
)
{
header("Location: mobile/index.html");
}
?>
<html>
Resto del código fuente de la página
</html>
Script para detectar dispositivos móviles y servirles un estilo CSS
Script para detectar dispositivos móviles y servirles un estilo CSS
El siguiente script usa
Javascript para servir a los clientes que no usen los navegadores
estándar Internet Explorer, Chrome o Firefox, un estilo CSS diferente.
<script type="text/javascript">
//<![CDATA[
if((navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Googlebot/i)) || (navigator.userAgent.match(/Chrome/i)) || (navigator.userAgent.match(/Firefox/i))) {""} else {
document.write('<style type="text/css" media="screen">#sidebar,#menu{display:none;}#page{width:99%;}#content{width:99%;}</style>');}
//]]>
</script>
//<![CDATA[
if((navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Googlebot/i)) || (navigator.userAgent.match(/Chrome/i)) || (navigator.userAgent.match(/Firefox/i))) {""} else {
document.write('<style type="text/css" media="screen">#sidebar,#menu{display:none;}#page{width:99%;}#content{width:99%;}</style>');}
//]]>
</script>
¿Qué hace el script?
Solo escribe el siguiente estilo si no se utilizan los navegadores especificados, que oculta la barra lateral o sidebar y el menú, también ajusta el ancho de la página.
Solo escribe el siguiente estilo si no se utilizan los navegadores especificados, que oculta la barra lateral o sidebar y el menú, también ajusta el ancho de la página.
<style type="text/css" media="screen">
#sidebar,#menu{display:none;}
#page{width:99%;}
#content{width:99%;}
</style>
No hay comentarios:
Publicar un comentario