<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> iPad Orientation CSS
Chris Coyier
on
This is pretty sweet wish i had an ipad to try it out on..
I would add a bit more queries to it. This would have the same effect on the iPhone.
That’s what I’ve been looking for – I’ve thought it ridiculous that you need javascript to apply some styling based on orientation.
Something to keep in mind is adding a check for the platform like below
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone') {
document.write("");
document.write("");
}
This way it doesn’t get loaded unless the platform matches.
in the “‘s place the LINKs as listed above. Not sure why they didn’t show. :-/
I’m not a fan of this solution (sorry!) – especially as a well-constructed fluid layout wouldn’t need to make this distinction.
With many devices now having native portrait and landscape modes, this is no longer just about catering to the iPad; it’s the physical width, rather than the orientation – that matters. @media queries are infintely more accurate and efficient if the CSS is well constructed.
:)