iPad Detection Using JavaScript or PHP
The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's developer tip sheet they provide the iPad's user agent string:
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
Given that string we can create a few code snippets to determine if the user is being a smug, iPad-using bastard.
The JavaScript
var isiPad = navigator.userAgent.match(/iPad/i) != null;
A quick String.match regular expression test can check for the presence of "iPad" in the user agent string.
The PHP
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
This time we look for the position of "iPad" in the user agent string.
The .htaccess
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]
Using some logic from Drew Douglass' excellent mobile redirection post, we can redirect users to a mobile version of your website if you so desire.
So what would you the above tests for? You may want to redirect iPad users to a different version of your website. You may want to implement different styles to your standard website if your user is surfing on an iPad.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Nice tutorial. Did you get an iPad? I also created a similar tutorial
http://cardonadesigns.com/wordpress/2010/04/04/using-php-to-detect-the-ipad-user-agent/
The cruddy thing about the iPad user agent string is that it has the word “mobile” in it. So if your detection script is looking for “mobile” already, it may also be sending iPad users to your iphone/mobile optimized site. Apple offered up a way to test though -> http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html
Great! Now I can redirect/block iPad users!
@Rob: That’s what I was thinking! Thanks David.
@Rob: That’s what I was thinking! Thanks David.
for PHP will be better
$isiPad = strpos($_SERVER['HTTP_USER_AGENT'],’iPad’) !== false;
I just use this code:
// <![CDATA[
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
document.location = "WEBSITE GOES HERE";
}
@Connor Crosby: that is in a javascript
Another, and often better option is media queries in CSS3
http://www.w3.org/TR/css3-mediaqueries/
You can deliver CSS based on device characteristics, such as viewport width, and orientation (so you can have different CSS for portrait and landscape)
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html
Let them eat Flash
Welcome to the old web !
…
“Site optimised for IE 5.5″
But where is the code to make the iPad melt once detected? :p
@Noetic: you could start with js “while……..” =x
Very nice tutorial, tnx man!
V.
I was a little stuck. I’m looking to do something similar, but really just target the viewport for the iPhone/iPod Touch and iPad. Here’s what I came up with so far but doesn’t seem to work. Any suggestions?
<?
$useragent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match("/ipad/", $useragent)) {
echo '’;
}
else if(preg_match(“/iphone/”, $useragent) || preg_match(“/ipod/”, $useragent)){
echo ”; }
?>
Hey ! Thanks for the turorial !
I’m a newbie, and I wanna do something I guess is easy, but can’t find a solution.
What I wanna do is to display a certain element (a div) if the user is on his computer, but display another one instead if he is on his iPad.
What should I write, and where ????
Please help me !
Charles
This post is featured on 40 iPad tools, tips for designer
Perfect! thank you David!
Hi! Thanks for the article.
I wrote a free open source set of APIs for web designers to detect mobile visitors. The APIs are very light weight, easy to implement, and easily customized. They’re available for JavaScript, PHP, Java, and ASP.NET. Check out http://www.mobileesp.org
Nice article, thanks.
Also nice site and article on iPad site dev Garmahis. Particularly enjoyed the link to page flipping versus scrolling. :)
$useragent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match("/ipad/", $useragent)) {
die("It Sucks....")
}else
{
.
.
.
.
.
}
?>