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
