Detecting Apple Device Orientation

Following on from my post at the weekend about Responsive Design, a fellow blogger Tristan Bettany has emailed in his example for detecting either the iPad or the iPhone and the screen orientation.

It uses a small amount of PHP to detect the device then CSS to detect the orientation. Copy and paste the following into the head of your page.

<?php
//Functions to check user agent for iPad, iPod, iPhone
function iPadCheck(){
return preg_match('/(iPad)/', $_SERVER['HTTP_USER_AGENT']);
}
function iPhoneCheck(){
return preg_match('/(iPhone|iPod)/', $_SERVER['HTTP_USER_AGENT']);
}

//Set correct css files based on detected device
//orientation property supported in mobile safari to change layout on rotation
if (iPadCheck()) {
echo'
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="iPadPortrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="iPadLandscape.css" />
';
} else if (iPhoneCheck()) {
echo'
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="iPhonePortrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="iPhoneLandscape.css" />
';
} else {
echo'
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1199px)" href="minDesktop.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="fullDesktop.css" />
';
}
?>

The script detects the device then includes the associated stylesheet depending on the orientation.

Any questions add a comment.