Using CSS Media Queries to Style Your iPhone and iPad HTML

In my previous post, I showed how you can use JavaScript to detect orientation and style your iPhone and iPad pages.

As reader Jason Grigsby kindly pointed out, you can also do this purely with CSS Media Queries!

Visit our CSS & HTML resource center for a full listing of new, events, and products.

I've reworked the file I made for that example to use CSS Media Queries to do just that. I split the iPad style into two files: ipad-portrait.css, showing the upcoming and new content under the news content; and ipad-landscape.css, showing the upcoming and new content to the right of the news content. The behavior of the web page is the same in the previous example, but doesn't require any JavaScript to make it all work. (Caveat: I was not able to get the iPhone simulator to respond to the orientation property in my CSS Media Queries; for this example, it didn't matter, but keep that in mind if you want to load a different style on the iPhone on an orientation change).