Detectar Dispositivos y Redireccionar Con Javascript

Detectar dispositivos y redireccionar con
Javascript
En un post anterior vimos como redireccionar pginas en un sitio web. Hoy vamos a
ver como detectar el dispositivo del usuario y redireccionarlo a nuestro sitio mvil
mediante Javascript.
Cundo un usuario accede a nuestro sitio web desde un dispositivo mvil (smartphone o
tablet), es una buena prctica redirigirlo a un archivo de nuestro sitio adaptado para este
tipo de dispositivos a fin de adaptarnos a sus caractersticas especficas con la consecuentes
mejoras de navegacin y experiencia del usuario.
La deteccin del tipo de dispositivo que est utilizando nuestro visitante puede realizarse en
el servidor mediante PHP, pero tambin del lado del cliente mediante Javascript. Es bueno
recordar que Javascript puede deshabilitarse en todos los navegadores por accin del
usuario, por lo que quizs el mejor mtodo sera redirigirlo mediante PHP, de lo que
hablaremos en un prximo post.
Vamos a ver dos mtodos para realizar esta deteccin y el redireccionamiento. La primera
es creando nuestro propio script y la segunda utilizando un script externo como el de
Detect Mobile Browsers.
Nuestro Script Personal
Lo primero que debemos hacer es acceder a la informacin del Agente de Usuario (User
Agent), que en Javascript se realiza a travs de navigator.userAgent. El cdigo sera el
siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script type=text/javascript>
var dispositivo = navigator.userAgent.toLowerCase();
if( dispositivo.search(/iphone|ipod|ipad|android/) > -1 ){
document.location = http://www.pepfarinweb.com/mobile; }
</script>
</head>
<body>
</body>
</html>
Comento un poco el cdigo: Creamos una variable llamada dispositivo, que nos
almacena del objeto Navigator la propiedad userAgent, y nos devuelve una
informacin completa sobre el agente de usuario representado por el navegador, mediante
el mtodo toLowerCase(), transforma esta informacin en minsculas para que no existan
errores de escritura.
El condicional if busca la cadena iphone o ipod o ipad o android, (en este ejemplo,
aunque podemos colocar ms agentes de usuario), a travs del objeto location, lo
redirigimos al archivo de nuestro sitio donde se encuentran las pginas diseadas para este
tipo de dispositivos.
Mediante Scripts Externos

Si no tienes ganas de complicarte la vida y quieres tener todo tipo de dispositivos vlidos,
lo mejor que puedes hacer, es ir a la pgina web de Detect Mobile Browsers, all
encontrars varios scripts realizados para distintos lenguajes (JavaScript, PHP, ASP,
Phyton, etc.), pinchas en la pestaa del lenguaje que prefieras, descargas el archivo (en este
caso en Javascript) y al final te encontrars una cadena tipo
http://detectmobilebrowser.com/mobile, cambia esta URL por la tuya, guarda el script en
la carpeta donde tienes tus archivos Javascript en tu servidor, y entre las etiquetas head
de tu index.html coloca un cdigo de enlace parecido a ste, slo lo tienes que cambiar
por el nombre que le hayas dado a tu archivo js.
1 <head>
<script type="text/javascript"
2
src="javascripts/mobile.js"></script> //tu nombre de script
3
</head>
var device = navigator.userAgent
if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)||

device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|
iPad|iPod/i)|| device.match(/Opera Mini/i)|| device.match(/IEMobile/i)||
device.match(/Mobile/i)|| device.match(/Windows Phone/i)||
device.match(/windows mobile/i)|| device.match(/windows ce/i)||
device.match(/webOS/i)|| device.match(/palm/i)|| device.match(/bada/i)||
device.match(/series60/i)|| device.match(/nokia/i)|| device.match(/symbian/i)||
device.match(/HTC/i))
{
window.location = "http://www.miwebmovil.com/";
}
else
{
En este tutorial veremos dos funcionalidades que JavaScript nos brinda, las cuales nos
pueden ampliar las posibilidades de crear sitios web dinmicos y a la altura del mercado
actual. Veremos cmo detectar si se est ingresando desde un dispositivo mvil (ipod,
iphone, ipad) y cmo hacer que una funcin de JavaScript se ejecute despus de un tiempo
determinado.
Pueden ver el ejemplo en vivo ac y descargar los archivos del archivos del tutorial ac.
1. Creamos un archivo html.
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>Detectar dispositivos Mviles JavaScript - baka</title>
6 </head>
7 <body>
8 </body>
9 </html>
2. Dentro de la etiqueta <head> insertamos el cdigo JavaScript.
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4 <script>
5
6 </script>
7 </head>
3. Definimos un funcin dentro de la etiqueta <script>, la cual llamaremos
deteccion(). Esta funcin mostrar un mensaje de alerta cada vez que se ejecute.
1
2
3
4
5
<script>
function deteccion(){
alert('Esto es una prueba');
}
</script>
4. Ahora haremos que esta funcin se ejecute un segundo despus de que la pgina
haya cargado.
1
2
3
4
5
6
<script>
alert('Esto es una prueba');
}
window.onload = setTimeout("deteccion();",1000);
</script>
5. Cuando se llama el window.onload = /*funcion*/, le estamos diciendo al

navegador que ejecute una funcin en el momento que la pgina se inicie. Por otro
lado la funcin de JavaScript setTimeout("javascript
statement",milliseconds) sirve para ejecutar funciones despus de un un
tiempo.
Est funcin recibe dos parmetros:
1. el primero el nombre de la funcin que queremos que ejecute, en este caso
deteccion();
2. el segundo parametro es el tiempo que queremos que espere el navegador en
ejecutarla, en este caso es 1000 (equivale a un 1 segundo ya que el valor esta
en milisegundos).
6. Ahora dentro de la funcin deteccion() queremos que muestre un mensaje

alert(), el cual muestre desde que dispositivo est entrando (iPod, iPad, iPhone u
otro).
1 function deteccion(){
2
alert('Ests entrando desde un '+navigator.platform);
3}
4 window.onload = setTimeout("deteccion();",1000);
7. Ahora dentro de la funcin deteccion() queremos que muestre un mensaje
alert(), el cual muestre desde que dispositivo est entrando (iPod, iPad, iPhone u
otro).
1
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform ==
2
'iPod')
3
{
4
}else{
5
}
6
7
}
8
8. Para tal caso se debe crear un condicional if(), en el que se le pregunte al
navegador del usuario de que plataforma o dispositivo est usando.
Nota: el simbolo || es un . Se le esta preguntando: si es un iPad un iPhone o un
iPod.
9. Para ver otras funcionalidades de detectar desde que dispositivo ingreso a la pgina
web ingresamos dos <div> en la etiqueta <body>.
1
2
3
4
5
<body>
<div id="conte">
<div id="texto"></div>
</div>
</body>
10. Y ponemos sus respectivos estilos dentro de la etiqueta <head>

2
3 <style>
4 body{
5
font-family:Arial, Helvetica, sans-serif;
6
font-size:36px;
7
margin:0px;
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
}
#conte{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
text-align:center;
color:#FF9;
}
#texto{
position:absolute;
left:0px;
top:50%;
width:100%;
height:40px;
margin-top:-20px;
background:#000;
}
</style>
11. Ahora dentro de la funcin deteccion() le agregamos esta lnea de cdigo:

document.getElementById('texto').innerHTML =
despus del alert().
navigator.platform;
Lo que le estamos diciendo ah es que del documento (HTML) obtenga el elemento

cuyo id es texto y dentro de l le agrege un texto html, en este caso el texto sera
el dispositivo desde el cual estoy accediendo a la pgina web.
1
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform ==
2
'iPod')
3
{
4
}else{
5
}
6
7
document.getElementById('texto').innerHTML = navigator.platform;
8
}
9
12. Para finalizar tambien le podemos agregar otra lnea de cdigo dentro del
condicional if(), la cual cambiar el estilo del fondo del <div id="conte">. Si
entra desde un iPad, iPhone o iPod que el fondo sea azul, de lo contrario que sea
vino tinto.
1 function deteccion(){
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform

2
== 'iPod')
3
{
4
document.getElementById('conte').style.background = '#09C';
5
}else{
6
document.getElementById('conte').style.background = '#603';
7
}
8
9
document.getElementById('texto').innerHTML = navigator.platform;
10
}
13. El resultado final al acceder en distintos dispositivos (iPad, iPod, Mac, Windows) es
el siguiente.
Funcin JavaScript para detectar si una pgina web est siendo visitada desde
un dispositivo mvil
05/06/2014 Enlace permanente
Buceando en el cdigo del theme Hero de WordPress, desarrollado por ThemeTrust he

encontrado una funcin JavaScript muy sencillita para detectar si una pgina web est
siendo visitada desde un dispositivo mvil.
No es completa, pero s cubre los principales dispositivos mviles:
Funcin para detectar dispositivos mviles
JavaScript
function isMobile(){
return (
(navigator.userAgent.matc
(navigator.userAgent.matc
1
2
3
function isMobile(){
return (
(navigator.userAgent.match(/Android/i)) ||
(navigator.userAgent.match(/webOS/i)) ||
(navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i)) ||
(navigator.userAgent.match(/BlackBerry/))
);
10
ADVERTENCIA: Este artculo tiene ms de 6 meses de antigedad. Puede que esta

informacin ya se encuentre obsoleta o haya nuevas y mejores opciones.
Va el blog (interesantsimo por cierto) de David Walsh, nos deja 3 post donde nos explica
con 2 lneas de cdigo como detectar si tu visitante est utilizando el sistema operativo
Android, un iPad o un iPhone/iPod.
Los artculos completos estn en:
Deteccin de Android por David Walsh
Deteccin de iPad por David Walsh
Deteccin de iPhone/iPod por David Walsh
A continuacin los cdigos, pero no olvides que visitar el post original de cada caso por si
se me escap algo.
Nota: la deteccin de iPhone con htaccess la aport yo.
Cdigo 1 - JAVASCRIPT
// android
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
// Do something!
// Redirect to Android-site?
window.location = 'http://android.davidwalsh.name';
}
// ipad
// For use within normal web clients
var isiPad = navigator.userAgent.match(/iPad/i) != null;
// For use within iPad developer UIWebView

// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone
OS 3_2_2/i.test(ua);
// iphone/ipod
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1)
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
}
Cdigo 2 - PHP
// android
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !==
false) {
header('Location: http://android.davidwalsh.name');
exit();
}
// ipad
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
// iphone/ipod
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
header('Location: http://yoursite.com/iphone');
exit();
}
Cdigo 3 - HTACCESS
// android
RewriteCond %{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://android.davidwalsh.name [R=301]
// ipad
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]
// iphone/ipod
RewriteEngine on
RewriteCond ${HTTP_USER_AGENT} iPhone
RewriteRule .* http://m.tuweb.com
Tcnicas para detectar dispositivos mviles y/o con retina para redirigir el
contenido web
18 July 2013 on HTML 5, JavaScript, PHP, Web, WordPress
Os voy a mostrar unas cuantas maneras de poder detectar los dispositivos mviles a travs
del navegador (User Agent) que est usando el usuario. Los ejemplos son para el lado
servidor, cliente, con CSS y Wordpress, tanto en forma de plugin como en cdigo.
PHP User Agent
Cuando el navegador le pide al servidor una pgina a su vez tambin enva cierta
informacin acerca del "User Agent". Lo que podramos hacer sera comparar este con un
listado de "User Agents" sobre dispositivos mviles y redirigir al usuario en funcin de su
versin.
El cdigo en s es bastante simple, haremos uso de la funcin preg_match() para comparar
el navegador del usuario con una array que contenga navegadores mviles.
<?php
// Creamos array de mviles
$mobiles = array("iPhone","iPod");
foreach( $mobiles as $mobiles ) {
if( preg_match('#'.$mobile.'#i',$_SERVER['HTTP_USER_AGENT'])){
// Si da 'true' redigirimos el contenido
header('Location:http://mobile.mi_sitio.com/');
exit();
}
}
?>
Este cdigo es muy manejable ya que podramos deshabilitar este testeo via
cookie por si alguno de nuestros visitantes desease ver la versin de escritorio
de nuestra web a travs de un link que coloquemos en el 'footer'. El truco sera
establecer el link de 'yoursite?nomobile=1' para testear la variable antes de la
redireccin, el cdigo quedara de esta manera:
<?php
// Comprobamos si hay 'get', 'post' o 'cookie' para nomobile
if ( isset( $_REQUEST['nomobile']) && true ==
$_REQUEST['nomobile']) {
// Comprobamos si tenemos la cookie establecida para no tener que
llamar al 'get' en la URL todo el tiempo
if(!isset($_COOKIE['nomobile'])){
setcookie('nomobile', 1, (time()+60*24*30));
}
} else {
// Comprobamos si el navegador actual es mvil
$mobiles = array("iPhone","iPod");
foreach( $mobiles as $mobiles ) {
if( preg_match('#'.$mobile.'#i',$_SERVER['HTTP_USER_AGENT'])){
// Si da 'true' redigirimos el contenido
header('Location:http://mobile.mi_sitio.com/');
exit();
}
}
?>
El cdigo PHP lo debemos de colocar al principio de nuestra pgina

para que tenga validez.
JavaScript User Agent

Utilizaremos un cdigo bastante similar al que tenemos en PHP. Mientras que
PHP es ms global, la alternativa de JavaScript es ms adecuada para sitios
donde tengamos poco o ningn control sobre el servidor o por si queremos
hacer algo ms especfico. Con la opcin de JS necesitamos cargar toda la web
antes de hacer la redireccin, que es exactamente lo contrario a lo que hace la
alternativa PHP. Este sera el ejemplo:
<script type="text/javascript">
var mobiles = array["iPhone","iPod"];
// Dispositivos mviles
for(var i=0;i< mobiles.length;i++){
// Comprobamos que RegExp coincida con los agentes
var er = new RegExp(mobiles ,"i");
if(er.test( navigation.userAgent )){
window.location = "http:/mobile.mi_sitio.com/";
}
}
</script>
Cdigo para Wordpress

En Wordpress ya existen unas variables globales que nos ayudan a comprobar
si el usuario est con un dispositivo mvil o no y que navegador usa. Despus,
podemos usar esa info para cargar diferentes scripts, estilos... Ejemplo:
<?php
function carga_estilos_propios(){
global $is_iphone// Cargamos la global var
if( $is_iphone ){
wp_enqueue_style( 'iphone-style',
get_stylesheet_directory_uri() . '/ iphone-style.css');
} else {
wp_enqueue_style('normal-style', get_stylesheet_directory_uri() .
'/style.css');
}
}
add_action( "wp_enqueue_scripts", "carga_estilos_propios");
?>
Cdigo HTML para Retina
Para detectar a los dispositivos retina de Apple y cargar las imgenes por unas
de alta calidad podemos poner estas lneas de cdigo dentro de la etiqueta
<head>
<link rel="stylesheet" type="text/css" src="estilo_normal.css"/>
<link rel="stylesheet" type="text/css" src="retina.css" media="only
screen and (-webkit-min-device-pixel-ratio:2)"/>
Otra manera de mostrar contenido en funcin al dispositivo o anchura de la

pantalla sera con las media queries.
Media queries
Las media queries nos ayudan a aplicar estilos de manera condicional si ciertas
reglas retornan true Se aplican en funcin de las reglas especificadas por
anchura del navegador, del dispositivo o densidad de pxeles.
/* Smartphones (portrait y landscape) */
@media only screen and (min-device-width:320px)
width:480px){
/* Estilos */
}
/* Smartphones (landscape) */
@media only screen and (min-width:321px){
/* Estilos */
}
/* Smartphones (portrait) */
@media only screen and (max-width:320px){
/* Estilos */
}
/* iPads (portrait y landscape) */
width:1024px){
/* Estilos */
}
/* iPads (landscape) */
width:1024px) and (orientation:landscape){
/* Estilos */
}
/* iPads (portrait) */
width:1024px) and (orientation:portrait){
/* Estilos */
}
/* Desktops and Laptops */
/* Estilos */
}
/* Large Screens */
/* Estilos */
/* ----------- iPhone 4 and 4S ----------- */
and (max-device-
and (max-device-
and (max-device-
and (max-device-
/* Portrait and Landscape */

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
@media only screen
}
/* Portrait */
@media only screen
}
/* Landscape */
@media only screen
}
/* ----------- iPhone 6 ----------- */
@media only screen

}
/* Portrait */
@media only screen
}
/* Landscape */
@media only screen
}
/* ----------- iPhone 6+ ----------- */
@media only screen
}
/* Portrait */
@media only screen
}
/* Landscape */
@media only screen
}
Nos ofrece un pequeo script en los principales idiomas de programacin (php, javascript,
grails, asp,)
Es suficiente con incluir una linea de cdigo en nuestra pagina para que detecte si nuestro
visitante nos ve a travs de un mvil o de un PC.
Cuando sepamos que quien nos visita es un mvil podremos redirigirle a otra pagina, o
cargar algn CSS especial.
En este pequeo ejemplo que he hecho la pagina nos dice a travs de PHP y de jQuery si le
visitamos desde un mvil o no:
http://www.vissit.com/projects/detectMobile/
Otra alternativa con buena pinta es php-mobile-detect.
http://code.google.com/p/php-mobile-detect/downloads/list
Es una opcin ms completa, ya que nos permite saber que tipo de mvil es (android,
iphone, opera mini,) pero con la limitacin de estar solo disponible para PHP.
Por ltimo, la opcin mas completa es WURFL: http://wurfl.sourceforge.net/
En este caso se valida el user-agent con un XML completsimo (y actualizado
peridicamente) de terminales mviles.
Nos proporciona mucha mas informacin, pero para el caso que yo busco (simplemente
cargar una CSS especifica para mviles) es demasiado pesado y complejo.
Y vosotros conocis alguna otra opcin? Cual os gusta ms?
Como detectar dispositivos mviles
Fecha: 4 years ago by Jaime Fernndez
Comentarios: 2 comentarios hasta el momento
Tags: movil, responsive
Cada da el trafico generado desde los terminales mviles es mayor, pero todava son pocas
las paginas web que estn adaptadas para ser vistas correctamente desde dichos dispositivos
(entre ellas las mas).
Por este motivo, estoy empezando a investigar que alternativas gratuitas existen para
controlar quien visita mis web, y en consecuencia presentarles el contenido de un modo o
de otro.
La mas sencilla y que se adapta muy bien a mis necesidades es Detect Mobile Browsers:
http://detectmobilebrowsers.com
Nos ofrece un pequeo script en los principales idiomas de programacin (php, javascript,
grails, asp,)
Es suficiente con incluir una linea de cdigo en nuestra pagina para que detecte si nuestro
visitante nos ve a travs de un mvil o de un PC.
Cuando sepamos que quien nos visita es un mvil podremos redirigirle a otra pagina, o
cargar algn CSS especial.
En este pequeo ejemplo que he hecho la pagina nos dice a travs de PHP y de jQuery si le
visitamos desde un mvil o no:
http://www.vissit.com/projects/detectMobile/
Otra alternativa con buena pinta es php-mobile-detect.
Detectar dispositivos mviles a travs de JavaScript
El nmero de visitas que recibe cualquier sitio Web desde dispositivos mviles no ha
dejado de crecer, por lo que se hace cada vez ms necesario adaptar nuestros sitios a
dichos dispositivos, y as mejorar su usabilidad.
Lo primero que tendremos que hacer, ser detectar el dispositivo desde el cul se est
accediendo a nuestra Web. Para ello, vamos a usar el siguiente cdigo JavaScript, de tal
forma que todas aquellas visitas que procedan desde este tipo de dispositivos, sern
redirigidas a la URL que le indiquemos.
<script type="text/javascript">
var device = navigator.userAgent
if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)||
device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|iPad|iPod/i)||
device.match(/Opera Mini/i)|| device.match(/IEMobile/i)|| device.match(/Mobile/i)||
device.match(/Windows Phone/i)|| device.match(/windows mobile/i)||
device.match(/windows ce/i)|| device.match(/webOS/i)|| device.match(/palm/i)||
device.match(/bada/i)|| device.match(/series60/i)|| device.match(/nokia/i)||
device.match(/symbian/i)|| device.match(/HTC/i))
{
window.location = "Aqu debes escribir la ruta (relativa o absoluta) de tu versin mvil,
por ejemplo: version-movil.html";
}
else
{
}
</script>
Para comprobar su funcionamiento, puedes descargar un sencillo ejemplo haciendo clic
aqu - (archivo comprimido: contiene index.html y movil.html).
En index.html se ha aadido el cdigo JavaScript, redireccionando a los usuarios que
accedan desde dispositivos mviles a movil.html
Cmo detectar dispositivos mviles mediante PHP

Detectar dispositivos mviles mediante PHP es muy fcil mediante la clase Mobile-Detect
lo que permite mejorar el responsive design de un sitio.
archivado en: PHP/AJAX || 26 octubre, 2012
El otro da preguntaron en la lista ovillo cmo hacer un slide, un carrusel, en modo
responsive y mi respuesta fue que lo mejor era eliminarlo para los mviles, ya que es un
elemento complementario, pero no fundamental... tratar de explicarme.
Para hacer una buena pgina web responsive creo que no basta con emplear imgenes
elsticas y cajitas fluidas; tambin es importante filtrar la informacin que se enva desde el
servidor. Por lo general, las condiciones en las que se visita una web desde un smart-phone
no son las mismas que desde un ordenador. Lo normal es tener contratada una tarifa plana
que al llegar a cierta cantidad de datos se satura y adems la conexin 3G es mucho peor
que la proporcionada por una wifi y se va leyendo en el metro o el autobs y... en fin, que
cada dato enviado es una lata.
Por lo tanto, lo mejor es dosificar los datos enviados, es decir, quitar los ms pesados, como
las imgenes, sobre todo cuando no cumplen una funcin comunicativa esencial, sino que
son elementos de diseo ms o menos accesorios. Es el caso de los slides o carruseles de
imgenes.
Existen varias maneras de detectar desde qu dispositivo se est conectando un usuario a
una web, pero quizs sean las que emplean PHP las ms interesantes, ya que, como corre
del lado del servidor, podemos estar seguros de que funcionar siempre. Y lo bueno es
que Serban Ghita y Victor Stanciu han desarrollado una clase que facilita muchsimo este
proceso: Mobile-Detect.
Es fcil de usar:
1. Se descarga desde github y se sube al server:
2. Se incluye en la pgina web mediante la sentencia
require_once ('Mobile_Detect.php');
3. Se crea una instancia:
$detect = new Mobile_Detect();
4. Y ya se recurre a los condicionales que se necesiten:
<?php
if ($detect->isMobile()) {
// Detecta si es un mvil
if ($detect->isTablet()) {
// Si es un tablet
if ($detect->isAndroidOS()) {
// Si es Android
if ($detect->isiOS()){
//Si es iOS
?>
Por ejemplo, imaginemos que tenemos un script que carga un carrusell

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. <script>
6. // aqu una barbaridad de cdigo y libreras para que funcione el carrusel
7. </script>
8. </head>
9. <body>
10.// aqu una barbaridad de imgenes muy pesadas para el carrusel
11.</body>
12.</html>
Ahora vamos a decirle que lo que hay entre las lneas 5 y 7, as como lo que hay en la lnea
10, solo se cargue si el dispositivo no es un mvil (si la comprobacin da false).
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <?php require_once ('Mobile_Detect.php');
5. $detect = new Mobile_Detect(); ?>
6. <title></title>
7. <?php if ($detect->isMobile()==false) { ?>
8. <script>
9. // aqu una barbaridad de cdigo y libreras para que funcione el carrusel
10.</script>
11.<?php } ?>
12.</head>
13.<body>
14.<?php if ($detect->isMobile()==false) { ?>
15.// aqu una barbaridad de imgenes muy pesadas para el carrusel
16.<?php } ?>
17.</body>
18.</html>
La forma tradicional: segn la direccin IP
De hecho, hasta hace un tiempo esta era la nica forma de saber la procedencia de un
visitante: tomar la direccin IP (pblica) desde la cual recibimos la peticin y compararla
con una base de datos de IPs con sus posibles localizaciones. Para determinar la IP desde la
cual nos visita el usuario, desde de php sera:
$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR'])
? $_SERVER['HTTP_X_FORWARDED_FOR']
: $_SERVER['REMOTE_ADDR'];
Esta ip no representa el nodo real desde el cual nos visitan, pero usualmente es una buena
aproximacin del origen del usuario.
Existen varias bases de datos dedicadas a recopilar este tipo de informacin, quizs la ms
popular sea la versin gratuita de IPligence (mientras no se use para fines comerciales y se
les d el crdito). Esta versin incluye 150,000 referencias por pas, Microsiervos hizo un
experimento en el que determinaron que es 95% exacta.
Hay que tener en cuenta que IPligence te da su base de datos en formato CSV y con las IPs
convertidas a nmero enteros, pero ellos explican como hacer la conversin de IPs y como
cargar estos datos hacia un gestor de base de datos.
Otra opcin son los datos de Hostip, un proyecto abierto que con ayuda de la comunidad y
algunos ISPs ha ido recolectando sus datos. Puedes descargar la base de datos de IPs, o
usar su API incluso.
Deja que el mismo usuario te diga con HTML5
Una de las nuevas funcionalidades de HTML5, es la posibilidad de saber la ubicacin del

usuario (una vez este lo autorice). Obviamente los navegadores an tienen que implementar
la especificacin de Geolocalizacin del W3C, que hasta el momento Firefox 3.5, el iPhone
OS, Android y Google Chrome, entre otros, ya ofrecen esta opcin.
Si nos basamos en la especificacin del W3C, para detectar la ubicacin del usuario es
bastante sencillo:
?
1if (typeof navigator.geolocation == 'object'){
2
navigator.geolocation.getCurrentPosition(mostrar_ubicacion);
3}
4
function mostrar_ubicacion(p)
6{
7
alert('posicin: '+p.coords.latitude+','+p.coords.longitude );
8}
La exactitud depender del agente con el cual se intente detectar la ubicacin, los mviles
que cuentan con GPS obviamente sern mucho ms exactos que si se usan las redes WIFI
cercanas para adivinar la ubicacin.
Tal vez convenga usar geo-location-javascript, un framework que agrupa varias propuestas
de Geolocalizacin (aparte de la del W3C) en un solo lugar. Usarlo es igual de sencillo:
?
1if(geo_position_js.init()){
2
geo_position_js.getCurrentPosition(success_callback,error_callback);
3}
4else{
5
alert("Functionality not available");
6}
7
8function success_callback() {...}
function error_callback() {...}
Hice un pequeo ejemplo usando este framework para que lo prueben en su navegador.
Para ver como funciona, solo vean el cdigo fuente o bien pueden bajarlo desde github
Base de datos de IPs vs HTML5
Usar una base de datos de IPs tiene la ventaja que todo funciona detrs, el usuario no debe
autorizar el compartir su ubicacin ni debe usar un navegador moderno; lo malo que estos
datos son precisos solo a nivel de pas y si el hardware del usuario ya cuenta con un GPS no
lo estamos aprovechando. Dependiendo de lo que queramos hacer, probablemente el mejor
enfoque sea usar una base de datos de IPs sencilla y a la vez preguntarle al usuario que nos
comparta su ubicacin.
Conocer e identificar telfonos celulares y mviles Smartphone
Detector de dispositivos portables como telfonos, celulares, mviles

Smartphone, tabletas, que permite conocer varias caractersticas tcnicas
como su tipo, el nombre, navegador que usa, su versin, sistema operativo,
firmware, etc. Tambin se puede usar desde la PC o Laptop para saber detalles
del navegador con que se carga la pgina.
Debido a la amplia diversidad de modelos de dispositivos mviles que existen

en la actualidad y que permiten el acceso a internet ya sean telfonos
celulares, tabletas, consolas, etc. esta pgina puede ser muy til para conocer
algunas de las caractersticas tcnicas de cualquiera de ellos, que de otra
forma se hara mucho ms compleja.
Para eso solo es necesario entrar a esta pgina con dicho dispositivo.
Despus de haberla cargado completamente, en la tabla a continuacin se
podr ver varios datos propios del dispositivo.
Los parmetros tcnicos que no comprendas, se explican en detalles ms
abajo.
Es vlido tambin lo anterior al cargar la pgina desde una PC de escritorio o
Laptop.
Datos del dispositivo
Tipo de dispositivo
bro
Nombre genrico navegador
gecko
Version navegador
40
ID Navegador
moz
Sistema operativo equipo
nt
SO Versin
6.1
Nombre del dispositivo

Navegador movil
Navegador movil nmero
Sistema operativo dispositivo
Version sistema operativo (firmware)
Servidor mvil (Servicio)
Servidor mvil nmero
Nmero del dispositivo
Es una Tableta?
Soporte de HTML
Duracin de la comprobacin (segundos)
0.00025511
En la tabla se incluyen valores para identificar tambin equipos de escritorio y

Laptops, por lo que en uno y otro caso siempre se vern renglones vacos,
adems algunos dispositivos devuelven muy poca informacin.
Informacin que devuelve el detector de dispositivos

Tipo de dispositivo
Devuelve los siguientes identificadores del navegador empleado:
bot (web bot)
bro (navegador normal)
bbro (navegador sencillo)
mobile (navegador de un dispositivo portable)
dow (agente de descarga)
lib (http library)
ID Navegador
De forma abreviada devuelve el nombre del navegador, por ejemplo: ie, op,
moz, konq, saf, ns4, webkit y otros. En algunos casos el nombre completo, por
ejemplo: lynx.
Soporte de HTML
Tres valores numricos que indican la capacidad de representar HTML5 ya que
todos los navegadores no lo admiten:
1- EL dispositivo representa formatos anteriores al HTML5
2- Funciones bsicas de HTML5 como audio, video, etc.
3- Soporta correctamente todas las funciones de HTML5.
Cmo funciona el detector de dispositivos?

El detector de dispositivos no es ms que un script escrito en PHP, que extrae
toda la informacin necesaria del agente de usuario del navegador con el que
se accede a esta pgina.
No sabes que es el agente de usuario?
Cada modelo de navegador posee una serie de caracteres que indican varias
caractersticas tcnicas suyas y del equipo donde funciona. Al realizar la
peticin de una pgina web, se enva dicho agente de usuario para asegurarse
que el servidor entrega la pgina en el formato adecuado.
Cul es mi agente de usuario?

Para comprender lo anterior, a continuacin se muestra el agente de usuario
de tu navegador.
El agente de usuario de tu navegador es:
Mozilla/5.0 (Windows NT 6.1; rv:40.0) Gecko/20100101 Firefox/40.0
Usos prcticos del agente de usuario del navegador
Puedes usar un script similar al de esta pgina en tu sitio web, si necesitas

identificar el navegador con el que los usuarios cargan tus pginas y realizar
alguna accin especfica, por ejemplo enviar a una pgina determinada los que
usen mviles, cargar un estilo CSS solo para algunos navegadores, etc.
Tambin puede comprobarse las caractersticas de varios dispositivos
diferentes en este detector, aunque no se posean fsicamente, ed lo que se
conoce como "Simular un navegador".
Para eso se puede instalar en el navegador Firefox la extensin: User Agent
Switcher desarrolla por Chris Pederick, hace que el navegador funcione como
un simulador al permitir cargar esta pgina u otra, usando agentes de usuarios
diferentes, ya sea de un mvil, una tableta, cualquier versin de escritorio,
hasta incluso un bot o araa de un buscador web.
Lee mas informacion: Como usar en Firefox la extensin "User Agent Switcher"
Lo mismo puedes hacer en Google Chrome instalando la extensin gratis UserAgent Switcher desde la Web Store.
Esta pgina puede cargarse en cualquier dispositivo, solo introduciendo en su

navegador la siguiente direccin acortada:
bit.ly/micelular
Crditos
Script original de: TechPatterns http://techpatterns.com/
En dicho sitio web puedes encontrar y descargar gratis varios scripts en
lenguaje PHP y JavaScript como el que se utiliza en esta pgina y otros para
propsitos similares.
5 trucos interesantes para tu Web en mvil o tablet
jesuse
Blog
7 comments
Todos lo sabemos, el futuro de la web es mvil: tabletas y smartphones son

ya una parte importante de nuestro trfico web al menos en la nuestra ya
representa el 13% de las visitas segn Analytics, fjate t. Nosotros nos hemos
encontrado ante distintos retos cuando se trata de hacer que un website est
mejor adaptado a la visualizacin en tales dispositivos. Queris algunas
soluciones interesantes con unos cuntos cdigos simples, sin tener que
hacer cambios dramticos? Os las servimos en bandeja a continuacin
Adaptar la visualizacin encajndola al dispositivo

Si tu website no se ve encajado correctamente en una tablet o mvil, aunque
no sea un sitio responsive (o sea, de esos que se adaptan a cada uno,
mediante CSS o Javascript), aun as hay una etiqueta HTML que bien utilizada
por lo menos dar cierta funcionalidad a las pginas. [code]<meta
name=viewport content=width=device-width>[/code] Esta etiqueta,
colocada en la zona de <head> de un documento HTML, provoca que el
dispositivo ajuste el zoom para que todo el ancho de la zona de
contenidos se encaje en el ancho del dispositivo. La mayora de las veces
con eso, al menos en un tablet, empieza la visualizacin a estar mejor
encajada. Coloca el cdigo en todas las pginas de tu web y empezar a tener
todo otra pinta. Ms informacin sobre la etiqueta META de vierport en
htmlcinco.com
Haciendo que el telfono llame (o no)

Si colocas nmeros de telfono y otros datos, algunos dispositivos los intentan
reconocer y que puedas tocarlos para utilizarlos (aadir direcciones en la
agenda, etc.) En ocasiones quieres especficamente poner un enlace a un
telfono de tal forma que puedas llamar desde un mvil. Ese tipo de enlaces
son simples, slo tienes que enlazar a tel:XXXXXXXX sustiyendo las Xs por el
nmero de telfono todo seguido, sin espacios, guiones ni otros caracteres. El
enlace en cdigo quedar as tal como sigue: [code]<a href=tel:987271430
title=Llamanos por telfono>987 27 14 30</a> [/code] Pero y si lo que
quieres evitar es que el iPhone, por ejemplo, autodetecte el telfono (como
suele hacerlo)? Tambin es sencillo con otra etiqueta META, como es esta:
[code]<meta name = format-detection content = telephone=no>[/code]
Ms informacin en esta pgina: Tips para optimizar tu pgina web en
smartphones
A veces querrs ver la versin mvil de Google Maps, y a veces, no
Mapas, no me vayis a versin mvil, por favor

En un mvil tiene sentido que si pones un enlace normal a Google Maps te
salte una pgina que te recomiende descargarte la aplicacin, y te d la opcin
de seguir y verlo en formato web mvil. Pero en un tablet quiz no tanto

Para forzar que se cargue en la versin estndar de Google Maps,
aade la siguiente cadena a la URL: &ui=maps Por ejemplo, si la direccin del
enlace al mapa fuera: [code]http://maps.google.es/maps?
q=Gran+Via+37+madrid[/code] la sustituiramos por:
[code]http://maps.google.es/maps?q=Gran+Via+37+madrid&ui=maps[/code]
Y si queremos forzar a que se cargue la versin mvil en todos los casos,
pondramos la URL as: [code]http://maps.google.es/m/maps?
q=Gran+Via+37+madrid[/code] Por cierto, para llevar a la app de mapas
de Apple, puedes usar esta URL en tus enlaces:
[code]http://maps.apple.com/maps?q=Gran+Via+37+madrid[/code]
Sustituyendo tras q= con cualquier direccin que quieras, separando las
palabras con el signo + Puedes ver las URLs de las versiones mviles de
algunas webs populares en este listado de websites mviles
El redondeo maldito de campos de formulario

En los dispositivos con Safari mvil vers que tus campos de formulario o
INPUTs tienden al redondeo. Con un poco de CSS aplicado a ellos lo podrs
eliminar, por ejemplo con esto: [code]input, textarea { -webkit-appearance:
none; -webkit-border-radius: 0; }[/code]
Redireccionar a una web mvil cuando detectamos

el dispositivo
Un cdigo interesante que podemos utilizar para redireccionar a una web mvil
al entrar en nuestro website podra ser este que hemos adaptado del blog de
Joason: [code]<script language=javascript> var device =
navigator.userAgent; var url = http://m.miweb.com/; if
(device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)||
device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|
iPad|iPod/i)|| device.match(/Opera Mini/i)|| device.match(/IEMobile/i)||
device.match(/Mobile/i)|| device.match(/HTC/i)) { window.location.replace(url);
window.location = url; } else { } </script>[/code] Bastara con poner este
script justo detrs de <body> en el HTML para que se ejecute y redirija cuando
detecte cualquiera de esos dispositivos.
El futuro de la web, cada vez ms mvil

Hay que prepararse y utilizar cada vez mejor tcnicas que permitan
coexistir nuestra web de escritorio, con una buena visualizacin y
funcionamiento en smartphones y tablets. En IDDECO ya estamos
formando a nuestros alumnos en ese mbito, y esperamos que estos trucos os

sean tiles para ir puliendo vuestras habilidades de Web mvil.
Desarrollo Android: Obtener nmero de telfono desde la

aplicacin
noviembre 15, 2011
Con este simple cdigo, podremos obtener el nmero de telfono donde se est
ejecutando la aplicacin android.
Antes de nada, debemos aadir permisos al archivo manifest.xml:
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
Y, a continuacin, la funcin que nos devolver el nmero de telfono del telfono donde
se est ejecutando nuestra aplicacin:
private String getPhoneNumber(){
TelephonyManager mTelephonyManager;
mTelephonyManager = (TelephonyManager)
getSystemService(Context.TELEPHONY_SERVICE);
return mTelephonyManager.getLine1Number();
}
Cmo detectar si el movil que te vas a comprar es una falsificacin

27 de octubre de 2014 | 08:01 CET
David Ortiz
Google+
@DavidOrti
Editor senior en Xataka Android
Publicidad
Sigue a Xataka Android

Newsletter:
RSS
Twitter
Facebook
Google Plus
Versin mvil
Versin tablet
Facebook Twitter G +1 E-mail
comentarios 25
Compartir en Facebook Twitter Google+ E-mail
No es algo habitual, pero puede ocurrir: que te compres un telfono y acabes dndote
cuenta de que es falso. Las imitaciones existen en muchos productos y la telefona no es
excepcin, por lo que no seras el primero en caer en la trampa si te dan una de estas
sorpresas.
Vamos a ver cmo detectar este tipo de falsificaciones, que pueden darnos un susto al
hacernos comprar un dispositivo completamente diferente al original. Aunque por fuera nos
pueda parecer idntico a simple vista, estas son las claves que nos pueden hacer sospechar.
Comprando desde China: los clones

Por supuesto no hablamos aqu de los fabricantes que vienen desde china e intentar
competir con el resto de igual a igual. En general todos los telfonos gamas alta llegan con
imitaciones de parte de otros fabricantes de origen chino que se dedican exclusivamente a
eso. Un par de nombres conocidos son Goophone (que llegan a lanzar las imitaciones antes
que el propio producto llegue al mercado) o Feiteng.
Peor lo que nos podemos encontrar, en general, al navegar por portales de origen chino son
otro tipo de imitaciones realizadas para dar lugar al engao. En muchas ocasiones la
denominacin no est clara. 'GT-N9006' podra parecer una versin del Note 3, que tiene
una denominacin similar (GT-N9005 para el modelo a la venta en europa). La realidad es
que se trata de una versin de muy inferiores caractersticas, y como ste aparecen cada vez
que aterriza un nuevo gama alta.
Por tanto, hay que ser precavidos, a menudo estos telfonos se venden en unas
especificaciones de apariencia similar (pantalla 5.7" Quad Core 3G), y consiguen acercarse
lo suficiente estticamente al producto original si no lo tenemos al lado para contrastar.
Pero como podis suponer no pasamos de telfonos que cuestan en fabricarse un tanto a
venderse por menos de esa cantidad. La factura de componentes se reduce de cabo a rabo.
Donde ms rpidamente podemos notarlo es en la pantalla de los dispositivos, que en el
caso de las Amoled es obvio (las LCD por las que las sustituyen suelen ser de psima
calidad). Por supuesto tambin en su interior, introduciendo chips MediaTek de gama baja o
incluso falseando el apartado de software, diciendo que lleva unas versin de Android que
no incluye.
S precavido de a quin le compras y cuidado con las

ofertas 'demasiado buenas'
Pero a veces incluso hay quien se desprende de estos telfonos en el mercado de segunda
mano, e intenta hacerlos pasar por los telfonos originales. De hecho, deberamos evitar, o
al menos asumir, este tipo de vendedores y tiendas sin garantas o posibilidad de

devolucin.
Como en casi todo, el sentido comn manda, y ms vale estar atento si no queremos caer
en la trampa. Como sabemos, nadie da 'duros a pesetas'. Si nos venden el ltimo HTC y
sospechosamente se acerca a pesar medio kilo, o tiene un tacto diferente, ms errores de lo
normal, bateras ms pequeas (miniaturizar es difcil y no lo hace cualquiera, para
mantener el tamao exterior podemos llegar a ver bateras ms estrechas) o procesadores
que no dan la talla, sospechemos.
Lo mejor aqu si sospechamos es tener un telfono idntico al que queremos comprar para
medirlos frente a frente. Si nos parece que un telfono puede no ser el original, es por
que probablemente no lo sea. No importa que nos estn intentando vender con una caja y
factura original, si el telfono no lo es.
Algunas de las falsificaciones adulteran incluso las especificaciones que tiene el
dispositivo. De forma que no podremos saber fcilmente cual es el procesador del telfono,
por mucho que nos fijemos en aplicaciones como CPU Z, Antutu u otras aplicaciones de
Benchmarking.
Comprueba el IMEI
Pero ponindonos en el peor de los casos, suponiendo que ya nos hemos hecho con uno de
estos telfonos, siempre nos queda la prueba de fuego: verificar el IMEI. El IMEI
(Identidad de Equipo Mvil Internacional, por sus siglas en ingls), el algo as como el
pasaporte de estos dispositivos. Este cdigo es nico, y cada telfono est listado con una
de estas sucesiones de 15 nmeros.
A menudo podemos encontrar este nmero en las facturas de compra, cajas del terminal o
en ste mismo. Con solo pulsar en la aplicacin de telfono *#06#, debera aparecer. Los
telfonos falsificados carecen de IMEI o lo llevan falsificado.
Para comprobarlo, nos puede ser de utilidad verificarlo en alguna base de datos online. Y
como siempre, si nos hemos equivocado, probablemente no seamos los primeros ingenuos
en todo internet. Googlear puede ayudarnos a encontrar casos similares con detalles que
nos pueden venir muy bien a la hora de preveer este tipo de situaciones.
Version mvil (III)
Dos versiones
Versin mvil y escritorio
Una vez que hemos creado una versin mvil de

nuestro sitio, ste tiene que "convivir" con la
versin de escritorio. Es decir queremos que el
usuario vea la versin correcta cuando abra
nuestra pgina. Al abrirla desde un ordenador de
escritorio tiene que ver la versin de escritorio, y
al abrirla desde un mvil, debe ver la versin de
mvil. Y esto simplemente al abrir el sitio, el cual
tiene una sla direccin web.
Cuando el usuario abre nuestro sitio le debemos
redireccionar a la versin mvil si ste esta usando
un dispositivo mvil. Para hacer esto, antes de
mostrar la pgina, debemos detectar cual es el
navegador que esta usando, y si ste corresponde a
un telfono mvil. En ese caso le redireccionamos
la pgina a la versin mvil, para que pueda verlo correctamente en su telfono.
Detectar un disposititivo mvil

bucar el "userAgent" con javascript
El "userAgent" es un texto que usan los navegadores para identificarse con los servidores
en Internet y en donde comparten caractersticas y alguna otra informacin til. Con el
"userAgent" podemos saber desde qu navegador o dispositivo nos estn viendo.
Para detectar el "userAgent" con javascript tenemos la propiedad navigator.userAgent,
que nos devuelve el "userAgent", es decir, la informacin sobre el navegador que est
usando el usuario.
Por ejemplo, si queremos ver el navegador que estamos usando en esta pgina utilizaremos
el siguiente cdigo javascript:
navegador=navigator.userAgent;
Ahora si queremos ver el "userAgent" que estamos utilizando, no tenemos ms que sacarlo
en pantalla, por ejemplo en un elemento con id="miuseragent", el cdigo para verlo ser:
document.getElementById("miuseragent").innerHTML=navegador;
Recuerda que este cdigo debes ponerlo dentro de la estructura window.onload =
function(){ ... } ya que la pgina debe haberse cargado.
Siguiendo estos pasos vemos cual es el "userAgent" que ests utilizando:
Puedes comprobar que si abres esta pgina en distintos navegadores saldrn diferentes
"userAgent". El "userAgent" indica no slo el navegador, sino la versin y muchas veces el
sistema operativo o dispositivo que estamos utilizando.
Buscar el UserAgent con PHP
Si utilizas un servidor PHP, tambin puedes detectar el "userAgent" mediante PHP,

Para ello no tenemos mas que usar el siguiente cdigo:
$miuseragent=$_SERVER['HTTP_USER_AGENT'];
Ahora sacamos en pantalla el "userAgent" guardado en la variable para comprobar que es el

mismo que con javascript:
echo "<p>$miuseragent</p>";
Hemos aplicado el cdigo y vemos aqu el resultado, comprobando que el "userAgent" es
exactamente igual:
"UserAgent" en dispositivos mviles
Cada modelo de telfono mvil utiliza un "userAgent" distinto. Esto nos llevara a una lista
interminable de "userAgent" que tendramos que comprobar para saber si el usuario est
utilizando un mvil. Adems estn saliendo constantemente modelos nuevos, por lo que
tendramos que estar renovando la lista.
Sin embargo no debemos desistir, ya que lo que buscamos no es el modelo que tiene el
usuario, sino saber si ste est utilizando un mvil o no. En esto el "userAgent" puede
darnos en la gran mayora de los casos una respuesta.
Los "userAgent" de los dispositivos mviles suelen llevar unos identificadores que nos
indican que estamos utilizando un mvil. Estos suelen ser la palabra "Mobile", o la marca o
sistema operativo particular que utiliza el telfono.
Por tanto el problema se reduce a buscar en el "userAgent" este identificador. Con la
siguiente lista de palabras podemos localizar la gran mayora de telfonos mviles:
"Mobile", "iPhone", "iPod", "BlackBerry", "Opera mini", "Sony", "MOT" (Motorola),
"Nokia", "samsung".
Por tanto, comprobaremos si en el "userAgent" est alguna de estas palabras, y si es as
redireccionaremos la pgina hacia su version mvil.
No olvidemos que el usuario puede entrar en nuestra web, no por la pgina principal o
"index", sino por cualquier otra pgina, por lo que esta operacin debe hacerse para todas
las pginas de nuestra web que tengan versin para mvil.
Redireccionar con javascript
Proponemos aqu un cdigo javascript para redireccionar una pgina hacia su versin mvil
cuando el usuario est utilizando un mvil para ver la pgina. El cdigo quedar as:
navegador=navigator.userAgent; //busco el "userAgent" del usuario.
//lista de palabras del "userAgent" en los mviles
moviles=["Mobile","iPhone","iPod","BlackBerry","Opera
Mini","Sony","MOT","Nokia","samsung"];
detector=0; //Variable que detectar si se usa un mvil
for (i in moviles) { //comprobar en la lista ...
//si el mtodo "indexOf" no devuelve -1, indica que la palabra est en
el "userAgent"
compruebo=navegador.indexOf(moviles[i]);
if (compruebo>-1) {
detector=1; //Si es un mvil, cambio el valor del detector
}
}
if (detector==1) { //si es un mvil redirecciono la pgina.
location.href="movil/index.php"; //Se redirecciona hacia la versin
mvil.
}
El cdigo para redireccionar la pgina hacia su versin mvil puede ser parecido a este. Lo
hemos comentado para una mejor comprensin. En resumen, hemos buscado el
"userAgent", comprobamos si ste es el de un mvil, y si es as redireccionamos la pgina
hacia su versin movil.
Redireccionar con PHP
Para redireccionar un pgina hacia su versin mvil utilizando un cdigo PHP haremos
algo similar a lo que hemos visto con javascript. Es decir comprobamos el "userAgent", y si
ste es de un mvil, redireccionamos la pgina. Proponemos aqu el siguiente cdigo, que
sigue los mismos pasos que el cdigo visto para javascript:
$miuseragent=$_SERVER['HTTP_USER_AGENT']; //Busco el "userAgent" del
usuario
//lista de palabras del "userAgent" en los mviles
$moviles=array("Mobile","iPhone","iPod","BlackBerry","Opera
Mini","Sony","MOT","Nokia","samsung");
$detector=0; //variable para detectar si el usuario utiliza un mvil
(0=no, 1=si);
$numMoviles=count($moviles); //nmero de palabras en la lista
for ($i=0;$i<$numMoviles;$i++) { //comprobar en la lista ...
$comprobar=strpos($miuseragent,$moviles[$i]);
if ($comprobar!="") { //si detectamos un mvil ...
$detector=1; //cambiamos la variable de deteccin.
}
}
if ($detector==1) { //si es un mvil redireccionamos la pgina.
header("Location:movil/index.php");
}
El cdigo est comentado para indicar lo que estamos haciendo en cada paso. Los pasos
que damos son lo mismos que en javascript.
Este cdigo es conveniente ponerlo al principio de la pgina, antes del HTML, de esta
manera nos redireccionar hacia la versin web antes de cargar la pgina en versin
escritorio.
No olvidemos que el usuario no tiene porqu entrar en nuestra web por su pgina de inicio,
por lo que todas las pginas deberan disponer de un redireccionamiento hacia su versin
mvil, bien sea hacia la pgina de inicio o hacia la pgina que se abre en su versin mvil.
Veremos en la siguiente pgina una serie de herramientas para comprobar la versin mvil
mientras la vamos creando, Estas son herramientas que emulan la pgina vista desde un
telfono mvil u otros dispositivos.

Detectar Dispositivos y Redireccionar Con Javascript

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Detectar Dispositivos y Redireccionar Con Javascript

Загружено:

Авторское право:

Доступные форматы

Detectar dispositivos y redireccionar con

Nuestro Script Personal

Mediante Scripts Externos

var device = navigator.userAgent

if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)||

5. Cuando se llama el window.onload = /*funcion*/, le estamos diciendo al

6. Ahora dentro de la funcin deteccion() queremos que muestre un mensaje

10. Y ponemos sus respectivos estilos dentro de la etiqueta <head>

11. Ahora dentro de la funcin deteccion() le agregamos esta lnea de cdigo:

Lo que le estamos diciendo ah es que del documento (HTML) obtenga el elemento

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform

Buceando en el cdigo del theme Hero de WordPress, desarrollado por ThemeTrust he

ADVERTENCIA: Este artculo tiene ms de 6 meses de antigedad. Puede que esta

Deteccin de Android por David Walsh

Deteccin de iPad por David Walsh

Deteccin de iPhone/iPod por David Walsh

// For use within iPad developer UIWebView

PHP User Agent

El cdigo PHP lo debemos de colocar al principio de nuestra pgina

JavaScript User Agent

Cdigo para Wordpress

Cdigo HTML para Retina

Otra manera de mostrar contenido en funcin al dispositivo o anchura de la

/* Portrait and Landscape */

and (max-device-width: 667px)

Como detectar dispositivos mviles

Fecha: 4 years ago by Jaime Fernndez

Comentarios: 2 comentarios hasta el momento

Tags: movil, responsive

Cmo detectar dispositivos mviles mediante PHP

3. Se crea una instancia:

$detect = new Mobile_Detect();

4. Y ya se recurre a los condicionales que se necesiten:

Por ejemplo, imaginemos que tenemos un script que carga un carrusell

Una de las nuevas funcionalidades de HTML5, es la posibilidad de saber la ubicacin del

alert("Functionality not available");

Base de datos de IPs vs HTML5

Detector de dispositivos portables como telfonos, celulares, mviles

Debido a la amplia diversidad de modelos de dispositivos mviles que existen

Datos del dispositivo

Nombre genrico navegador

Sistema operativo equipo

Nombre del dispositivo

Duracin de la comprobacin (segundos)

En la tabla se incluyen valores para identificar tambin equipos de escritorio y

Informacin que devuelve el detector de dispositivos

Cmo funciona el detector de dispositivos?

Cul es mi agente de usuario?

Usos prcticos del agente de usuario del navegador

Puedes usar un script similar al de esta pgina en tu sitio web, si necesitas

Esta pgina puede cargarse en cualquier dispositivo, solo introduciendo en su

Todos lo sabemos, el futuro de la web es mvil: tabletas y smartphones son

Adaptar la visualizacin encajndola al dispositivo

Haciendo que el telfono llame (o no)

A veces querrs ver la versin mvil de Google Maps, y a veces, no

Mapas, no me vayis a versin mvil, por favor

de seguir y verlo en formato web mvil. Pero en un tablet quiz no tanto

El redondeo maldito de campos de formulario

Redireccionar a una web mvil cuando detectamos

El futuro de la web, cada vez ms mvil

formando a nuestros alumnos en ese mbito, y esperamos que estos trucos os

Desarrollo Android: Obtener nmero de telfono desde la

Cmo detectar si el movil que te vas a comprar es una falsificacin

Sigue a Xataka Android

5. Cuando se llama el window.onload = /funcion/, le estamos diciendo al