You're Viewing in Portrait Mode

You're Viewing in Landscape Mode

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.

Using orientation in CSS is very simple. The code looks like this:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

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:

<h1 id="portrait">You're Viewing in Portrait Mode</h1>
<h1 id="landscape">You're Viewing in Landscape</h1>

The css for portrait.css simply hides the landscape <h1>:

#landscape {display:none}

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 longer than the width.

<