Detect IPhone, IPod, BlackBerry...

Detect IPhone, IPod, BlackBerry...Tag(s): Mobile

Using Javascript

if((navigator.userAgent.match(/iPhone/i)) ||
   (navigator.userAgent.match(/iPod/i)))  {
     window.location = "http://www.rgagnon.com/howto.html&mobile=1";
}

It's not a bad idea to provide a way to override the automatic redirection with a cookie for example.

if((navigator.userAgent.match(/iPhone/i)) ||
   (navigator.userAgent.match(/iPod/i)))   {
     if (document.cookie.indexOf("mobile_redirect=false") == -1) {
        window.location = "http://www.rgagnon.com/howto.html?mobile=1";
     }
}

Using PHP

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
   strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
header('Location: http://www.rgagnon.com/howto.html?mobile=1');
exit();
}

Using Apache .htaccess

#redirect mobile browsers
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*iPod.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*BlackBerry.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*Palm.*$
RewriteRule ^(.*)$ http://mobile.yourdomain.com [R=301]

These tips examine the HTTP_USER_AGENT to check the current device. It is easy to detect a particuliar device with a simple Javascript function.

function isiPad(){
    return (navigator.platform.indexOf("iPad") != -1);
}

Note that is possible for a client to cheat on the HTTP_USER_AGENT so it's not 100% reliable.

The same principle can be applied to Android detection. Typical Android HTTP-Agent looks like :

Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2 � G1 Phone

Mozilla/5.0 (Linux; U; Android 1.0; en-us; generic) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2 � Emulator

Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 �Nexus

Mozilla/5.0 (Linux; U; Android 0.5; en-us) AppleWebKit/522+ (KHTML, like Gecko) Safari/419.3

So you need to detect the presence of the "Android" string :

function isAndroid(){
    return (navigator.platform.indexOf("Android") != -1);
}

List of Mobile Phone User Agents : http://www.mobile-phone-specs.com/user-agent-browser/0/

It's is hard to keep up with all the devices since you don't want to support only the Apple devices.

Another way to use use a special CSS for mobile devices.

<link media="only screen and (max-device-width: 480px)"
         href="small-device.css" type= "text/css"
         rel="stylesheet">
<link media="screen and (min-device-width: 481px)"
         href="not-small-device.css" type="text/css"
         rel="stylesheet">
<!--[if IE]>
<link media="all"
         href="explorer.css" type="text/css"
         rel="stylesheet" />
<![endif]-->

NOTE : Internet Explorer will not understand the first two expressions, so we have to add a conditional comment (shown in bold) that links to an IE-specific version of the CSS.

It's always possible to specify in page some styles for the mobile device (without a CSS).

@media screen and (max-device-width: 480px) { ... }

The media="only screen.." is specific to Apple, to detect other mobile devices use the standard media handheld.

<link media="handheld, only screen and (max-device-width: 480px)"
      href="howtomobile.css" type= "text/css"
      rel="stylesheet"/>

Since IPhone/Ipod 4G have a better resolution, use this detection instead.

<link rel="stylesheet"
      media="only screen and (-webkit-min-device-pixel-ratio: 2)"
      type="text/css"
      href="howtomobile.css" />

Beware ... the result is not very good the CSS technique, some desktop browsers are not choosing the right CSS. This part needs more research!

Send comment, question or suggestion to howto@rgagnon.com

Detect IPhone, IPod, BlackBerry...Tag(s): Mobile

About cookies on this site