Share this page 

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!
mail_outline
Send comment, question or suggestion to howto@rgagnon.com