You're Viewing in Portrait Mode

You're Viewing in Landscape Mode

Screen/Window Orientation CSS

Based heavily on Jason Grigsby's demo (http://www.cloudfour.com/ipad-orientation-css/)

Webkit on the iPad, Webkit on Android, Safari, and Firefox all honor CSS media query declarations based on orientation.

Using orientation in CSS is very simple. The code for different stylesheets 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">

or, within the same stylesheet:

@media all and (orientation:landscape) {
   #portrait { display: none; }
}

@media all and (orientation:portrait) {
   #landscape { display: none; }
}

In this example, the only difference between the two styles 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>

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.