This week I was inspired to work out how to change a CSS stylesheet and overall layout based on a mobile devices orientation. This would allow for much more user friendly webpage viewing in both landscape and portrait modes of tablets and phones.

So far I can only tell that this orientation setting in CSS3 works on mobile safari as people tell me im a bit of a apple-fag these days. Anyway, the script I made comes down to the meta tags in the header which are used to swap out css files according to the orientation of the device, after detecting which device your using with PHP. Heres an example of the meta tags using the orientation setting:

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style/iPad/iPadPortrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="style/iPad/iPadLandscape.css" />

Ive put up a live example here for you to test it out yourself before implementing it into your own code.

To checkout all the code including the PHP used to run the live example please download the zipped code here. Any questions about the code please leave them in the comments.

I developed this code after being inspired by a blog post I saw on a friends blog about Responsive Design at ImAFish.co.uk. After e-mailing him my code he followed up with a blog post about my code, so a thanks is in order there.