Redireccionar a version mobile

huawei95 · #1 (**permalink**) 30/11/2011, 14:14

Hola amigos muy buenas veran resulta que tengo una pagina web html y en ella tengo algunas cosillas en flash y demas y aparte de que es bastante grande entonces he creado un subdominio y he quitado los elementos flash le he modificado el tamaño para que se vea mejor en dispositivos mobiles y quitado el flash puesto que la mayoria de lis dispositivos moviles no lo admiten, y ahora lo que quiero hacer si es posible es hacer que cuando se entre desde un dispositivo movil tipo iphone, ipad dispositivos android y demas te mande a la pagina creada para la version movil puesto que la otra no se veran porque tiene flash y ademas es muy incomoda porque es muy grande, se podria hacer esto??

Gracias

emprear · #2 (**permalink**) 30/11/2011, 14:32

esta script funciona muy bien y viene en varios lenguajes, y por cierto está bastante actualizada

http://detectmobilebrowsers.com/

Saludos

huawei95 · #3 (**permalink**) 01/12/2011, 08:33

y para instalarlo en mi pagina html que hago, me lo bajo por ejemplo en php y lo subo al servidor y ya esta o debo de agregar alguna linea a mi html y modificar algun parametro del plugin?? os dejo mi codigo de mi index.html para que veis el codigo

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="0000">
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE8' ><title>Home</title>
<meta name="keywords" content="Titutlo Web">
<meta name="description" content="Tirtulo">
<meta name="robots" content="index,follow">
<style type="text/css">
body {margin: 0px; padding: 0px;}
</style>
</head>
 
<body text="#000000" style="background-color:#03acef; text-align:center; height:1519px;">
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:1200px;height:1519px;">
<div style="position:absolute;left:114px;top:30px;width:1000px;height:1443px; text-align:left;">
    <iframe src="www.google.es" frameborder="0" width="1000px" height="1445px border="0" scrolling="no"></iframe>
    <div align="center">
    </div>
    
</div>
<a href="www.google.es"  target="_parent"><img src="wpimages/wp5533b116.gif" width="163" height="43" border="0" alt="" style="position:absolute;left:593px;top:128px;"></a>
</div>
</body>
</html>

emprear · #4 (**permalink**) 01/12/2011, 10:52

Todas las versiones de sa script funcionan de la misma manera, establece una condición en función del análisis del agente de usuario, y si detecta que se esta accediendo desde un movil, te redirige, simplemente tenes que cambiar la direccón
http://detectmobilebrowser.com/mobile
x
la url de tu página para móviles

si lo hacés con php, tenes que renombrar tu index.html como index.php, y al inicio

Código PHP:

Ver original<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://misitio.com/indexmovil.php);
?>

Yo en particular uso la de .htaccess (Apache)
la que está hecha en javascript, no la recomiendo, puede que algun dispositivo mas viejo no la interprete

SAludos

huawei95 · #5 (**permalink**) 01/12/2011, 13:44

ok muchas gracias he echo lo que me dijistes pero sale la pagina co signos en chino o algo simular una cosa muy rara, no se si sera mejor que use la de Apache como me dijistes

emprear · #6 (**permalink**) 01/12/2011, 16:42

habría que ver que estás haciendo, la script solo te redirige si es un movil, no saca ningún valor en pantalla

huawei95 · #7 (**permalink**) 02/12/2011, 08:06

no me refiero de que al añadir la linea de php que me pusiste y cambiar el archivo a .php al entrar ahora me aparece la pagina pero alrededor aparecen un serie de caracteres raro y yo diria que chinos

emprear · #8 (**permalink**) 02/12/2011, 10:53

a lo mejor es un problema de codificación
hacé una prueba sencilla
creá un archivo a.php y un archivo b.html

en a.php pone solo esto

Código PHP:

Ver original<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: b.html');
?>
Archivo a.php Ñ á

y b.html

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>archivo para móvil</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
Archivo b.html Ñ á
</body>
</html>

guardá los dos con codificación utf-8

despues accedé a a.php desde PC y desde un dispositivo movil y fijate si en el segundo caso te redirige a b.html
y fijate también como ves los caracteres Ñ á

Saludos

huawei95 · #9 (**permalink**) 02/12/2011, 14:09

Vale he creado con el bloc de notas un archivo en php llamado a.php y otro b.html ambos en la codificación que me dijistes, lo he subido al hosting y al entrar desde la pc al a.php me dice el navegador lo siguiente

Warning: Unexpected character in input: ''' (ASCII=39) state=1 in /home/a4271360/public_html/a.php on line 4

Parse error: syntax error, unexpected ':' in /home/a4271360/public_html/a.php on line 4

y al entrar al b.html

Archivo b.html Ñ á

en los resultados obtengo lo mismo desde el dispositivo movil que desde la pc

emprear · #10 (**permalink**) 02/12/2011, 16:08

si, ya lo revisé, puede que el copiar/pegar del foro haya substituido un caracter,

probá con este a.php

Código PHP:

Ver original<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: b.html');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
versión PC
</body>
</html>

y tratá de no hacerlos con el block de notas, que por defecto incluye algo llamado BOM de utf, lo que no es recomendable, usa algín otro editor más avanzado, notepad++, notepad2, etc (lee http://foros.emprear.com/codificar )

te dejo una demo

http://vinoselfrances.com.ar/mov/

si vas a a.php con pc debe quedar en a y si vas con movil debe de ir a b.html

SAludos

engonga · #11 (**permalink**) 02/11/2012, 09:15

buena respuesta pero si se visita con el opera mini esto no funciona, al menos con un nokia c3.

emprear · #12 (**permalink**) 02/11/2012, 11:36

Cita:

Iniciado por engonga

buena respuesta pero si se visita con el opera mini esto no funciona, al menos con un nokia c3.

Un par de aclaraciones, esa demo que dejé es un poco vieja, la versión de prueba la encontrarás en
http://foros.emprear.com/redir-mob/
Esa script se actualiza periódicamente para mejorar la detección de dispositivos, hay que ir a
http://detectmobilebrowsers.com/ para bajar la última versión (Regex updated: 18 October 2012)

Y funciona corrrectamente con Opera mini + Nokia C3

Saludos

engonga · #13 (**permalink**) 02/11/2012, 11:56

hola he probado http://detectmobilebrowsers.com pero lo que me pasaba es que si usaba el htacces cuando visitaba un archivo en concreto de dentro de la web por ejmplo www.ejemplo.com/contacto.php no me aplicaba la redireccion

despues he probado la version php de http://detectmobilebrowsers.com y no me funcionó.

y probé la version de javascript y no me funcionó con el opera mini de mi nokia c3

entonces he usado este http://detectmobilebrowsers.mobi/ que funciona perfectamente

pero igualmente muchas gracias

emprear · #14 (**permalink**) 02/11/2012, 15:31

Cita:

Iniciado por engonga

hola he probado http://detectmobilebrowsers.com pero lo que me pasaba es que si usaba el htacces cuando visitaba un archivo en concreto de dentro de la web por ejmplo www.ejemplo.com/contacto.php no me aplicaba la redireccion

despues he probado la version php de http://detectmobilebrowsers.com y no me funcionó.

y probé la version de javascript y no me funcionó con el opera mini de mi nokia c3

entonces he usado este http://detectmobilebrowsers.mobi/ que funciona perfectamente

pero igualmente muchas gracias

egonga, algo estarás haciendo mal, la de javascript no sé porque no la uso, pero la de php y .htaccess funciona perfectamente,
Navegué la url del ejemplo que deje con un nokia c3, opera mini sin problemas

engonga · #15 (**permalink**) 02/11/2012, 16:18

yo copio y pego y modifico el host y listo