This post gives you a short JavaScript function to detect your iPad users. Without any further ado, a javascript code to detect iPad users:
function isiPad(){
return (navigator.platform.indexOf("iPad") != -1);
}
You can also detect browser version and some other stuff by parsing user agent string. Here is an iPad Safari’s user agent string for your reference:
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
Recently a friend of mine got himself an iPad and I couldn’t not notice how his internet browsing device preferences are changing (PC & iPad). More and more people are using hand held devices namely iPad to browse the internet. So it’s about time to show your iPad visitors some love and display your website designed specifically for iPad.
Let’s see how to do this. There are two way:
- Redirect iPad visitors
- Apply different CSS file for iPad users
Most of the posts on the internet related to iPad user detection are suggesting and showing you how to redirect (including myself in my previous iPhone & iPod detection post). However, I would recommend the second option, applying different CSS file.
You can apply the same technique described in applying different styling for javascript enabled browser with CSS post and apply different CSS rules for iPad visitors.
Sidenote: If you decide to redirect iPad users rather than apply different CSS style rules, than I would recommend using server side detection and redirection. You can see an example PHP code by David Walsh.