CAT | Tutorial
6
iPad Portrait and Landscape CSS Tutorial
Comments off · Posted by admin in HTML5, iPad, Mobile, Tutorial
Similar to the iPhone, the iPad has both a portrait and landscape mode. Portrait mode is when the device is taller than it is wider. Landscape mode is when it is wider than it is taller.
Conveniently enough the iPad supports <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”css/portrait.css”> & <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”css/landscape.css”>
With these two simple tags you can serve the ipad appropriate style tweaks for whichever orientation the user happens to be looking at your site or app in.
To understand what I mean check out this example of the iPad portrait and landscape orientation. If you have an ipod hold it in portrait and then landscape mode and you will see what looks like two different web pages.
In portrait orientation the website looks like this:
In landscape orientation the website looks like this:
The HTML code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iPad Portrait and Landscape CSS tutorial</title>
<style>
#container{
width:55%;
margin:0 auto;
}
#header{
width:33%;
margin:0 auto;
}
</style><link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/landscape.css">
</head>
<body>
<div id="container">
<div id="header">
<h1 class="portrait">
Portrait
</h1>
<h1 class="landscape">
Landscape
</h1>
</div><!--end of header div-->
<div id="image">
<img class="landscape" src="images/landscape.jpg" alt="landscape">
<img class="portrait" src="images/portrait.jpg" alt="portrait">
</div><!--end of image div-->
</div><!--end of container div-->
</body>
</html>
The landscape.css file looks like the following:
.portrait{
display:none;
}
html{
background-color:#f6cf74;
}
And the portrait.css file looks like this:
.landscape{
display:none;
}
html{
background-color:#a06346;
}
This code simply says “What way are you holding your iPad? Ok, I will serve you code for that orientation. The code that is served uses CSS display:none to hide the unappropriate elements.
If you don’t have an iPad and want to see this work you can simply shrink the size of your browser until it is either wider than taller or vice versa.
more information:
http://mislav.uniqpath.com/2010/04/targeted-css/
http://www.cloudfour.com/ipad-orientation-css/
No tags
Like 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
