Cloud Four Blog

Technical notes, War stories and anecdotes

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:

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

34 Comments on “iPad Orientation CSS”

  1. Jason Lander says:

    Excellent information! Thank you.

  2. Ian says:

    Whoaaa, this potentially opens a cave of wonders for us devs. Surely iPhone will support this soon as well.

  3. Daniel Shaw says:

    Thanks. Good to know. Unfortunate that this doesn’t work on the iPhone too.

    Just a heads-up: there’s a typo on the demo page which incorrectly indicates
    (orientation:portrait)” href=”landscape.css”>

  4. This is great info. I had been using @media queries in the CSS itself to do the detection. This is much simpler!

  5. Tony Stocco says:

    Thank you Jason – I can implement this today!

  6. 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?

  7. Wake says:

    This is great info, as I read this on my N900 I had to test it. Being as it runs a version of Firefox, it works like a charm. :D

  8. [...] Per l’articolo completo invece qui. [...]

  9. Arkkimaagi says:

    Works also in Chrome

  10. [...] in CSSPreparing Your Web Content for iPadUser Experience Coding How-To's for Safari on iPhoneiPad Orientation CSS Espero que encuentren esta información útil y se animen a comenzar a diseñar pensando en las [...]

  11. Excellent article! Please keep the iPad tutorials coming

  12. Dan says:

    Now if someone can combine this with iPhone orientation…

  13. Chris Mear says:

    Ian: You can detect orientation changes on the iPhone version of WebKit, but only through JavaScript. Here’s an example I threw together.

  14. [...] Cloud Four propose une petite astuce pour charger un CSS en fonction de l’orientation de l’iPad (portrait ou paysage) durant la navigation. Bien sûr pour les français il faudra attendre fin avril pour avoir ce petit joujou entre nos mains mais on peut déjà optimiser son site pour la tablette d’Apple et le tester sur ipadpeek.com. [...]

  15. Guhan Iyer says:

    Excellent information, this helps avoid adding unnecessary code to the app itself.

  16. [...] related, leer deze code alvast uit je hoofd: <link rel=”stylesheet” media=”all and (orientation:portrait)” [...]

  17. guillaumeb says:

    not sure how this differs from this example which dynamically changes the layout according to your screen size http://www.w3.org/2010/Talks/0407-next-web-paris/demo-mq.html

  18. [...] iPad Orientation CSS « Cloud Four Ah, didn't know about those media queries. Will be using this (and not for iPad stuff). (tags: apple css css3 design development landscape portrait stylesheets webdevelopment webdev webdesign web tutorials ipad iphone mobile programming reference webkit) [...]

  19. [...] In this way, you can target styles specifically at different orientations. For more information, please see iPad Orientation CSS. [...]

  20. Ben Gross says:

    This article was useful. I listed it in the references for my article “Preparing Your Site for the iPad” http://www.messagingnews.com/onmessage/ben-gross/preparing-your-site-ipad.

  21. [...] CSS Media Queries kan också alltså komma väl till pass för att servera en css speciellt för iPaden – läs mer om detta hos x7 Labs och hos Cloud Four. [...]

  22. [...] iPad allows for landscape- or portrait-specific CSS declarations. Useful, as there already seems to be a UI design convention emerging based on device orientation. [...]

  23. Ryan says:

    Nice, I did some investigation on doing pure CSS orientation detection for the iPhone a while back. This definitely means the next firmware release will have this for the iPhone as well, finally.

  24. [...] Grigsby has a simple demo page to display different CSS styling depending on the [...]

  25. mytos.mykonos says:

    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, …)

  26. [...] iPad Orientation CSS from Cloud Four describes how you can use different stylesheets depending on orientation [...]

  27. [...] iPad Orientation CSS from Cloud Four describes how you can use different stylesheets depending on orientation [...]

  28. [...] is a keeper and covers some good reminders in terms of iPad design.2. CSS Orientation:This quick resource shows how to use CSS media query to make sure the site orients properly.3. Apple’s Official Development Starter Kit:This is a [...]

  29. [...] L’adattamento consiste in pratica nella creazione di due differenti fogli di stile CSS: [...]

  30. This is such a useful post.

    I used your orientation CSS to build an iPad CSS layout that changes the layout in portrait/landscape modes. You can see it here:
    http://matthewjamestaylor.com/demos/ipad-css-layout/index.html