mobile webapp CSS breaks on orientation change

Question

The CSS for my webapp gets completely misaligned when the mobile device is rotated to landscape (target devices are iphone and android). I tried using the javascript solution explained here in order to get my app to switch between a portrait.css and a landscape.css file on orientation change, but that still didn't work. It even messed up the portrait.css once they were both posted to the live server (although it worked on my local machine).

The url for the app is http://mobile.geekstats.com/

Does anyone know how I can fix the landscape css? Thanks!

Answer 1

Use CSS Media Queries to update your design

iPhone doesn’t support orientation currently (Thx @vava), so use media queries for width below

Orientation queries:

http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) {
  h1 {
    color: red;
  }
}
@media all and (orientation:landscape) {
  h1 {
    color: blue;
  }
}

Width queries:

/* Portrait */
@media only screen and (max-width: 320px) {
  h1 {
    color: red;
  }
}
/* Landscape */
@media only screen and (min-width: 321px) {
  h1 {
    color: blue;
  }
}

Check out http://lessframework.com for examples of width-based media query design.

There are many other media query options to target specific attributes of the viewing sesssion:
http://www.w3.org/TR/css3-mediaqueries/#contents