Cardona Designs | Setting Standards

Apr/10

4

Using php to detect the iPad Browser/User Agent

wolfram alpha ipad app screenshotLike some of you I recieved my iPad yesterday and have spent the day experimenting with the new layout that many of the apps are using including gmail and wolfram alpha (picture at right).

Basically the layout is 2 columns. The left column is around 30% wide and contains a menu (navigation, unread emails, etc). The right column is around 70% wide and contains the main content of the section you are on or the email you are reading.

While I don’t have much to report in terms of how to lay your page out in this manner I do have the first part of the puzzle. And that is how to detect the iPad in the first place.

I have been using the following php code to detect an iPhone/iPod Touch and redirect to an appropriate directory:

<?php if(strstr($SERVER['HTTPUSERAGENT'],’iPhone’) || strstr($SERVER['HTTPUSERAGENT'],’iPod’)) { header(‘Location: http://www.cardonadesigns.com/iphone’);

exit(); } ?>

To make it detect the iPad I simply changed it to the following: <?php if(strstr($SERVER['HTTPUSERAGENT'],’iPhone’) || strstr($SERVER['HTTPUSERAGENT'],’iPod’)) { header(‘Location: http://www.cardonadesigns.com/iphone’);

exit(); } else if(strstr($SERVER['HTTPUSER_AGENT'],’iPad’)) { header(‘Location: http://www.cardonadesigns.com/wordpress’);

exit(); }?> As you can see I am only redirecting to my blog for now until I figure out how to style the page appropriately. But this is an important start.

Got any good iPad CSS tips to share? Please post them in the comments. Thanks!

For more iPad tutorials from Cardona designs check out:

iPad Portrait and Landscape CSS Tutorial

Using Desktop Safari to See What Your Website Looks Like on the iPad

No tags

Comments are closed.

<<

>>

Theme Design by devolux.nh2.me