How to detect mobile device orientation change in jquery?

How can we detect orientation changes on the mobile devices such smart phones, tablets? The jQuery Mobile orientationchange event is fired when the user rotates the mobile device vertically or horizontally.

$(window).on( "orientationchange", function( event ) {

   alert("This device is in " + event.orientation + " mode!" )

});

Aslo you can identify orientation by CSS media queries as well:

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

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