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.

Serving up iPad-specific CSS

And here we go! You’re already familiar with media query to serve up iPhone-only stylesheets. Make sure you add this one to style sheet: