Detectar Browser iPhone

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:

[code]
HTTP_USER_AGENT=Mozilla/4.0
(compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)
[/code]

A diferencia de ello si accedemos utilizando Safari de iPhone o iPod Touch este sería de la forma:

[code]
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
[/code]

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:

[php]
function iPhoneCheck() {
$browser = strpos($_SERVER[‘HTTP_USER_AGENT’], “iPhone”);
if ($browser === false) {
return false;
} else {
return true;
}
}
[/php]

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.

  1. function iPhoneCheck() {
  2.     var agent = navigator.userAgent.toLowerCase();
  3.     var iphone = (agent.indexOf('iphone')!=-1);
  4.     if (iphone) {
  5.         return true;
  6.     } else {
  7.         return false;
  8.     }
  9. }

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.

  1. <!--&#91;if !IE&#93;>-->
  2. <link media="only screen and (max-device-width: 480px)"
  3. href="iPhone.css" type="text/css" rel="stylesheet" />
  4. <!--<!&#91;endif&#93;-->

Finalmente les dejo los archivos fuente de este ejemplo para que lo descarguen un puedan realizar sus pruebas y experimentos.

Comentarios Total 10 comentarios


Rodrigo Ascariz
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

Salvador
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.

GRN
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(…)

rafa
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

::::: magnético :::::
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 :::::

Sam
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 )

Jaimegssm
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…

jaimegssm
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….

jaimegssm
Publicado: 22/03/2011 9:25 am

jiji me equivoque debe quedar
window.location.href = “http://www.urlalternativa.com/”;

me comi la r.
Gracias……

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)