iPad Orientation CSS
For the most part, Mobile Safari on the iPad is the same as that on the iPhone. One difference that I’ve found is that Webkit on the iPad honors CSS media query declarations based on orientation.
I’ve built a sample page demonstrating orientation css for iPad.
Using orientation in CSS is very simple. The code looks like this:
In this example, the only difference between the two stylesheets is that they hide one of two headings. The html for the page has the following code:
The css for portrait.css simply hides the landscape <h1>:
And of course, landscape.css does the opposite.
You can see this css query in current versions of Safari and Firefox on your desktop machine. Simply change the size of your browser window until the height is taller than the width.