Actualmente hay muchos usuarios que acceden desde dispositivos mobiles a nuestras web, entre ellos iPhone el mas popular y mas avanzado. En esta ocasión veremos algunas formas de detectar que el usuario esta accediendo desde un iPhone o iPod Touch para posteriormente redireccionarlo a una versión optimizada de nuestro web.
HTTP_USER_AGENT
El HTTP_USER_AGENT es header enviado que indica las características del navegador utilizado. Si por ejemplo accedemos utilizando Firefox, esta propiedad sería de la forma:
HTTP_USER_AGENT=Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)
A diferencia de ello si accedemos utilizando Safari de iPhone o iPod Touch este sería de la forma:
HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3
Entonces utilizando esta propiedad vamos a detectar cuando un usuario accede desde un iPhone.
Utilizando PHP
Si utilizamos PHP, podemos hacer uso de la variable global $_SERVER en donde buscamos la palabra iPhone, para ello creamos la siguiente función:
function iPhoneCheck() {
$browser = strpos($_SERVER['HTTP_USER_AGENT'], "iPhone");
if ($browser === false) {
return false;
} else {
return true;
}
}
Luego para utilizamos esta función y podemos ver el ejemplo funcionando en iphone/detect.php.
Utilizando Javascript
En el caso no tengamos acceso a un lenguaje de servidor, podemos utilizar Javascript para detectar si el usuario esta accediendo desde un iPhone.
function iPhoneCheck() {
var agent = navigator.userAgent.toLowerCase();
var iphone = (agent.indexOf('iphone')!=-1);
if (iphone) {
return true;
} else {
return false;
}
}
Luego podemos ver un ejemplo del empleo de esta función en iphone/detect.html.
Utilizando CSS
Otra posibilidad es entregar hojas de estilo de acuerdo al browser utilizado por el cliente, para ello utilizaremos la propiedad only de CSS para aplicar el estilo unicamente cuando se cumpla las condiciones de ser la pantalla de un iPhone.
<!--[if !IE]>--> <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" /> <!--<![endif]-->
Finalmente les dejo los archivos fuente de este ejemplo para que lo descarguen un puedan realizar sus pruebas y experimentos.
Comentarios Total 10 comentarios
Publicado: 11/09/2008 6:45 am
Jo esto me viene de puta madre para hacer las paginas mucho competitivas con todos los navegadores y sobre todo para que los usuarios de Iphone no cargen tantos datos.
Lo pasare esta funcion a ASP y si puedo a .NET
Publicado: 23/03/2009 1:51 pm
¿Como puedo hacer para que con el iphone detect me redireccione a la página versión iphone, osea que detecte que navegador es y en dado caso de ser iphone que redireccione a la página con el formato de iphone.
saludos y muy bueno el post.
Publicado: 05/09/2009 7:22 pm
Salvador, para que haga lo que pides solo debes colocar un condcional, ya que la funcion devuelve true si el usuario esta desde un iphone y false si esta en un pc normal.
ejemplo:
<?php
if (iPhoneCheck()){
header('Location: http://www.url-a-redireccionar ');
}
(espero que se vea el codigo puesto)
si el usuario esta desde un iphone, la funcion devolvera TRUE con lo cual se redireccionara a la pagina que hayas puesto dentro del header(…)
Publicado: 20/10/2009 8:00 am
[…] Vía: http://blog.unijimpe.net/detectar-browser-iphone/ […]
Publicado: 04/12/2009 1:20 pm
GRN:
no se si me salteé un paso, pero no me funciona.
Agregue el codigo que le diste a salvador en mi index.php, pero no esta redireccionado a la nueva pagina que prepare para iphone.
Gracias x tu respuesta.
rafa
Publicado: 10/12/2009 10:59 am
Muy buenas, pues yo lo he resuelto de la siguiente forma:
function iPhoneCheck() {
var agent = navigator.userAgent.toLowerCase();
var iphone = (agent.indexOf(‘iphone’)!=-1);
if (iphone) {
return true;
} else {
return false;
}
}
if (iPhoneCheck()){
window.location = «http://www.urlalternativa.com/»;
}
Directamente en el HTML.
Espero que os valga :)
Un saludo,
::::: magnético :::::
Publicado: 10/05/2010 11:29 pm
MUUUUCHISIMAS GRACIAS!!!
A fin de cuentas solucione las cosas con tu post y con el comentario de
::::: magnético :::::
Pero me han solucionado el asunto…
Vean mi web! ( Click a mi nombre )
Publicado: 21/03/2011 5:12 pm
Hola chicos un gran aporte, estaba buscando esto, pero al correr el archivo la pagina queda en blanco.
Al igual que Salvador necesito ejecutar un html pero no lo hace…
Algun comentario, gracias…
Publicado: 22/03/2011 9:23 am
MAGNEITO, hola amigo, te falto un comando en la instruccion:
window.location = “http://www.urlalternativa.com/”;
debe quedar de la siguiente forma:
window.location.ref = «http://www.urlalternativa.com/»;
deben ser comillas no cremillas OJO!!!!!
asi funciona….
Gracias a todos por ayudar a los que por ahora estan aprendiendo, a ellos despues les tocara enseñar..
Gracias….
Publicado: 22/03/2011 9:25 am
jiji me equivoque debe quedar
window.location.href = “http://www.urlalternativa.com/”;me comi la r.
Gracias……