Detectar Browser iPhone

  • 04/09/2008
  • 1:30 am
  • unijimpe

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:
  1. HTTP_USER_AGENT=Mozilla/4.0
  2. (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:

CODE:
  1. HTTP_USER_AGENT=Mozilla/5.0
  2. (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+
  3. (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:

PHP:
  1. function iPhoneCheck() {
  2.     $browser = strpos($_SERVER['HTTP_USER_AGENT'], "iPhone");
  3.     if ($browser === false) {
  4.         return false;
  5.     } else {
  6.         return true;
  7.     }
  8. }

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.

JavaScript:
  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.

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

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

Posts Relacionados

Total de Comentarios: 1

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

Enviar Comentario

(*)

(*)