Cross Browser Issues: Detect iPad users through user agent script

by Saad Irfan

Overcoming the cross browser issues is always a challenge for web designers. For this reason, most of the designers prefer to have distinctive layout for various devices. But to switch the Cascading Style Sheets (CSS) file for users coming to your board according to their devices, you need to know the visitor’s platform and device information. iPad is the device, which recently came in market and believes to be a popular device among internet users like normal Netbooks, especially for those want to experience the internet on the go.  

So keeping the iPad users on preference list should be also consider. However till now, I could not see any major difference in famous sites’ preview on iPad. But differences in navigation menu in lot of sites have been observed heavily.

Following are scripts to detect iPad users, so you can redirect your users to specific sub-domain for iPad attuned or just switch the CSS file to overcome the broken layout issues.

In short, the string replace command is easy way to find out which device is being used.

A sample Environment value (user agent)

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

PHP Script:

<?php

if(strstr($_SERVER[‘HTTP_USER_AGENT’],’iPad’)){

// place your action here

// ex: header(‘Location: http://domain.com/iPad’);

}?>

JavaScript:

var isiPad = navigator.userAgent.match(/iPad/i) != null;

Through .htaccess:

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$

RewriteRule ^(.*)$ http://ipad.domainname.com [R=301]

In similar way, you can detect iPhone users

<?php

if(strstr($_SERVER[‘HTTP_USER_AGENT’],’iPhone’)){

// place your action here

}?>

Please do share your methods also through comments.