JQuery to identify "Potrait" or "Landscape" mode for device

Hello Kind Readers,

Recently while enabling Device Channel for SharePoint 2013, I came across a requirement to identify whether the device is in Potrait Mode or Landscape Mode. Based on the mode of the device, different behaviour should happen. There is a simply jQuery event that helps you capture this device transition from Potrait to Landscape or vice versa.

You need to make use of jquery mobile which has an event as orientationchange that gets triggered whenever we make the transition.

Below code snippet will explain more on this.

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript">

$(window).on( "orientationchange", function(event ) {
  alert("This device is in " + event.orientation + " mode!" );
});

// You can also manually force this event to fire.
$(window).orientationchange();
</script>

In this way, using orientationchange event and fetching the value of event.orientation method, you can find the device mode.

Hope it Helps !