Change CSS Based on Mobile Orientation

Question

What is the best approach to change a css file when a mobile application page orientation changes from landscape to portrait and vice versa. I need to suport both Android and iPhone only. It seems media queries aren't the cleanest way, any other ideas?

Answer 1

Example

/* For portrait */
@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/* For landscape */

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }
}

For more details see here

Answer 2

The below JQuery code seems to work best for me...the binding examples did not.

$(document).ready(function() {
               $(window).resize(function() {
                  alert(window.orientation);
                  });
               });