Redirigir tu página web con PHP , JavaScript detector Móvil y Tamaño de la pantalla

codigo-WordPress

¿QUÉ ENTENDEMOS POR REDIRECCIÓN MÓVIL?

Mejor explicar la redirección móvil con un ejemplo: Imaginad que alguien desde un dispositivo móvil visita nuestra página web, como ésta y no está preparada para pequeños terminales, no se mostrará bien por lo que optamos por mostrarle una web especialmente diseñada para dispositivos móviles.

Ejemplo de redirección

Podemos comprobar como detecta automáticamente desde que dispositivos estamos conectado y nos redirige a la apropiada CLASSIC (PC & Portátiles) – MOBILE (Smartphones y tf) – TABLET (Tablets)

Después de comprobar la multitud de páginas y blogs que existen enredando la explicación exacta y siendo consciente de ello por experiencia propia , intentaré explicarlo de una manera mas comprensible para aquellos que no tengan necesidad de ser desarrolladores profesionales lo hagan con la máxima facilidad , allá vamos!

1 – REDIRIGIR CON JAVASCRIPT DETECTANDO TAMAÑO DE LA PANTALLA

Introducir en nuestro archivo HTML o PHP entre las etiquetas

<HEAD> código prueba para redirigir su página </HEAD>

1	<HEAD> código prueba para redirigir su página </HEAD>

el código que vamos a personalizar a continuación:

<script type="text/javascript">
if (screen.width<800) {
window.location="http://www.tudominio.com/mobile/";
}
</script>

if (screen.width<800) {

window.location="http://www.tudominio.com/mobile/";

}

</script>

Donde WIDTH determina el tamaño de pantalla del terminal que accede a nuestra página y WINDOW.LOCATION determina a que página redirigiremos a todos los usuarios que tengan un Tamaño inferior al medida que definiremos , ejemplo:

Quiero que todos los terminales con una pantalla menor de 400 sean redirigidos a mi Página Responsive en HTTP://DVS.CAT/EJEMPLO.HTML

<!DOCTYPE html>
<HTML>
<HEAD>
<script type="text/javascript">
if (screen.width<500) {
window.location="http://dvs.cat/ejemplo.html";
}
</script>
</HEAD>
<BODY>
</BODY>
</HTML>

<!DOCTYPE html>

<HTML>

<HEAD>

if (screen.width<500) {

window.location="http://dvs.cat/ejemplo.html";

}

</script>

</HEAD>

<BODY>

</BODY>

</HTML>

2 – REDIRIGIR CON JAVASCRIPT DETECTANDO EL TERMINAL QUE ACCEDE A TU PÁGINA

Comento un poco el código: Creamos una variable llamada “dispositivo”, que nos almacena del objeto “Navigator” la propiedad “userAgent”, y nos devuelve una información completa sobre el agente de usuario representado por el navegador, mediante el método “toLowerCase()”, transforma esta información en minúsculas 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 más agentes de usuario), a través del objeto “location”, lo redirigimos al archivo de nuestro sitio donde se encuentran las páginas diseñadas para este tipo de dispositivos.

<script type="text/JavaScript">
var dispositivo = navigator.userAgent.toLowerCase();
if( dispositivo.search(/iphone|ipod|ipad|android/) > -1 ){
document.location = "http://www.tudominio.com/mobile/"; }
</script>

var dispositivo = navigator.userAgent.toLowerCase();

if( dispositivo.search(/iphone|ipod|ipad|android/) > -1 ){

document.location = "http://www.tudominio.com/mobile/"; }

</script>

Donde DISPOSITIVO.SEARCH determina el tipo de terminal que accede a nuestra página y DOCUMENT.LOCATION determina a que página redirigiremos a todos los usuarios que tengan alguno del los tipos de dispositivos que definiremos , ejemplo:

Quiero que todos los terminales iphone, ipod, ipad, android sean redirigidos a mi Página Responsive en HTTP://DVS.CAT/EJEMPLO.HTML

<!DOCTYPE html>
<html lang="es">
<head>
<script type="text/javascript">
var dispositivo = navigator.userAgent.toLowerCase();
if( dispositivo.search(/iphone|ipod|ipad|android/) > -1 ){
document.location ="http://dvs.cat/ejemplo.html"; }
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<head>

var dispositivo = navigator.userAgent.toLowerCase();

if( dispositivo.search(/iphone|ipod|ipad|android/) > -1 ){

document.location ="http://dvs.cat/ejemplo.html"; }

</script>

</head>

<body>

</body>

</html>

Si no tienes ganas de complicarte la vida y quieres tener todo tipo de dispositivos válidos, lo mejor que puedes hacer, es ir a la página web de “Detect Mobile Browsers”, allí encontrarás varios scripts realizados para distintos lenguajes (JavaScript, PHP, ASP, Phyton, etc.), pinchas en la pestaña del lenguaje que prefieras, descargas el archivo (en este caso en Javascript) y al final te encontrarás 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 código de enlace parecido a éste, sólo lo tienes que cambiar por el nombre que le hayas dado a tu archivo “js”.

<head>
<script type="text/javascript" src="http://tudominio.com/javascripts/tunombredescript.js"></script> //tu nombre de script
</head>`

<head>

</head>`

3 – REDIRIGIR CON PHP DETECTANDO EL TERMINAL QUE ACCEDE A TU PÁGINA

Es bueno recordar que Javascript puede deshabilitarse en todos los navegadores por acción del usuario, por lo que quizás el mejor método sería redirigir vuestra página mediante PHP.

1 – Lo primero descargaremos este archivo ZIP . Dentro encontraremos un archivo llamado “Mobile_Detect.php” que es el único que utilizaremos de este Paquete comprimido .

2 – Lo subiremos a nuestro servidor , si es posible en la misma carpeta del index principal de nuestra website pero no es imprescindible .

3 – Introducir en nuestro archivo HTML o PHP sobre las etiquetas

código PHP prueba para redirigir su página
<HEAD> </HEAD>

1 2	código PHP prueba para redirigir su página <HEAD> </HEAD>

el código que vamos a personalizar a continuación:

<?php include(‘Mobile_Detect.php’);
$detect = new Mobile_Detect();
if
($detect->isMobile() || $detect->isiOS() || $detect->isAndroidOS() || $detect->isTablet()) {
header("Location: http://www.tudominio.com/mobile/");
}
?>

<?php include(‘Mobile_Detect.php’);

$detect = new Mobile_Detect();

($detect->isMobile() || $detect->isiOS() || $detect->isAndroidOS() || $detect->isTablet()) {

header("Location: http://www.tudominio.com/mobile/");

}

4 – Donde new Mobile_Detect detecta y redireccionar a versión móvil o a la página que le indiquemos si nos visitan desde un smartphone, tablet o similar y
$detect->isMobile(), $detect->isiOS(), $detect->isAndroidOS(), $detect->isTablet() determina que tipo de sistemas & terminales detectados dan origen a la acción de redirigir a otra página , marcada por Location, ejemplo:

Quiero que solo los terminales Tablets sean redirigidos a mi Página Responsive en HTTP://DVS.CAT/EJEMPLO.HTML

<?php include(‘Mobile_Detect.php’);
$detect = new Mobile_Detect();
if
($detect->isTablet()) {
header("Location: http://dvs.cat/ejemplo.html");
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="author" content="DVStyle">
<link rel="shortcut icon" href="http://dvs.cat/ic/favicon.ico">
</head>
<body>
</body>
</html>

<?php include(‘Mobile_Detect.php’);

$detect = new Mobile_Detect();

($detect->isTablet()) {

header("Location: http://dvs.cat/ejemplo.html");

}

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

Recordad que a INCLUDE podemos asignarle la ruta del archivo Mobile_Detect.php sin ser necesario que se aloje en la misma carpeta que nuestro index original, ejemplo:

<?php include('../otracarpeta/miserver/Mobile_Detect.php');
$detect = new Mobile_Detect();
if
($detect->isMobile() || $detect->isiOS() || $detect->isAndroidOS() || $detect->isTablet()) {
header("Location: http://dvs.cat/ejemplo.html");
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="author" content="DVStyle">
<link rel="shortcut icon" href="http://dvs.cat/ic/favicon.ico">
</head>
<body>
</body>
</html>

<?php include('../otracarpeta/miserver/Mobile_Detect.php');

$detect = new Mobile_Detect();

($detect->isMobile() || $detect->isiOS() || $detect->isAndroidOS() || $detect->isTablet()) {

header("Location: http://dvs.cat/ejemplo.html");

}

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

Espero que os haya sido útil este Post y sobre todo Fácil de entender dada toda la controversia que encuentras en la red sobre este tema

Català

English

Blog