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!
APR