iPad Orientation CSS
April 5th, 2010 by Jason Grigsby
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.
April 5th, 2010 at 6:14 pm
Excellent information! Thank you.
April 6th, 2010 at 9:45 am
Whoaaa, this potentially opens a cave of wonders for us devs. Surely iPhone will support this soon as well.
April 6th, 2010 at 10:15 am
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”>
April 6th, 2010 at 10:28 am
This is great info. I had been using @media queries in the CSS itself to do the detection. This is much simpler!
April 6th, 2010 at 10:44 am
Thank you Jason – I can implement this today!
April 6th, 2010 at 11:13 am
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?
April 6th, 2010 at 11:45 am
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.
April 6th, 2010 at 12:02 pm
I wrote a little bit more on my blog:
http://mislav.uniqpath.com/2010/04/targeted-css/
April 6th, 2010 at 12:36 pm
@dshaw Thanks for the heads up on the typo. Fixed.
April 6th, 2010 at 1:00 pm
[...] Per l’articolo completo invece qui. [...]
April 6th, 2010 at 1:31 pm
Works also in Chrome
April 6th, 2010 at 4:52 pm
[...] 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 [...]
April 6th, 2010 at 8:18 pm
Excellent article! Please keep the iPad tutorials coming
April 7th, 2010 at 5:46 am
Now if someone can combine this with iPhone orientation…
April 7th, 2010 at 6:32 am
Ian: You can detect orientation changes on the iPhone version of WebKit, but only through JavaScript. Here’s an example I threw together.
April 7th, 2010 at 6:52 am
[...] 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. [...]
April 7th, 2010 at 12:06 pm
Excellent information, this helps avoid adding unnecessary code to the app itself.
April 7th, 2010 at 12:59 pm
[...] related, leer deze code alvast uit je hoofd: <link rel=”stylesheet” media=”all and (orientation:portrait)” [...]
April 7th, 2010 at 3:19 pm
For more on CSS media queries, see the spec at http://www.w3.org/TR/css3-mediaqueries/ or also https://developer.mozilla.org/En/CSS/Media_queries .
April 8th, 2010 at 10:02 am
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
April 8th, 2010 at 3:08 pm
[...] 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) [...]
April 8th, 2010 at 5:04 pm
[...] In this way, you can target styles specifically at different orientations. For more information, please see iPad Orientation CSS. [...]
April 9th, 2010 at 12:21 am
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.
April 10th, 2010 at 6:08 am
[...] 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. [...]
April 11th, 2010 at 7:01 am
[...] 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. [...]
April 11th, 2010 at 4:56 pm
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.
April 12th, 2010 at 4:57 am
[...] Grigsby has a simple demo page to display different CSS styling depending on the [...]
April 15th, 2010 at 12:34 am
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, …)
April 20th, 2010 at 10:53 am
[...] iPad Orientation CSS from Cloud Four describes how you can use different stylesheets depending on orientation [...]
April 20th, 2010 at 2:41 pm
[...] iPad Orientation CSS from Cloud Four describes how you can use different stylesheets depending on orientation [...]
April 26th, 2010 at 10:08 am
[...] 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 [...]
May 12th, 2010 at 9:17 am
[...] L’adattamento consiste in pratica nella creazione di due differenti fogli di stile CSS: [...]
May 28th, 2010 at 5:01 pm
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
June 1st, 2010 at 2:27 pm
This post is featured on 40 iPad tools, tips for designer