Archive for April 24th, 2010


Tip: iPad CSS

Here’s a new feature that snuck into the iPad’s version of WebKit: CSS orientation media queries!

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”>

Yeah, doesn’t get much simpler than that. And it works on non-sucking desktop browsers too, just resize the window narrow to see. Presumably this would be a handy tip for laying out content in your iPad (and no doubt iPhone after the next OS rev) apps via UIWebView and getting orientation changing in a straightforward fashion as well, with any luck.

Also check out the article comments for other handy tips on iDevice-friendly web page layout!

h/t: maxvoltar!