Skip to main content

iPad Orientation CSS

By Jason Grigsby

Published on April 5th, 2010

Topics

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:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

#landscape {display:none}
Code language: CSS (css)

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.

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Comments

Ian Storm Taylor said:

I’ve been wondering about hiding certain headings (for other reasons) and this leads me to ask a question. Do you know the ramifications (if there are any) with Google and such for hiding headings? Might it be construed as bad practice and get you blacklisted?

mytos.mykonos said:

you can already do this on iPhone for a while… using Javascript 😉 just comparing width vs height in JS and add a “orient=”landscape” classname to the body tag when needed. Then you can easily manage both in the same CSS file (easier for editing/maintaining!) using body > div and body[‘orient:landscape’] > div.

And it just works for all browsers (iPhone, Droid, Wimo, BB, Palm, N900, …)