JavaScript: Detect Orientation Change on Mobile Devices

gistfile1.js

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

// Listen for resize changes
window.addEventListener("resize", function() {
  // Get screen size (inner/outerWidth, inner/outerHeight)
  
}, false);

// Find matches
var mql = window.matchMedia("(orientation: portrait)");

// If there are matches, we're in portrait
if(mql.matches) {  
  // Portrait orientation
} else {  
  // Landscape orientation
}

// Add a media query change listener
mql.addListener(function(m) {
  if(m.matches) {
    // Changed to portrait
  }
  else {
    // Changed to landscape
  }
});

/* portrait */
@media screen and (orientation:portrait) {
  /* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
  /* landscape-specific styles */
}