jQuery Mobile direction event

jQuery Mobile orientationchange event

The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally.

Mobile

Mobile

To use the orientationchange event, please add it to the window object:

$("window").on("orientationchange",function(){
  alert("The direction has changed!");
});

The callback function can set a parameter, namely the event object, which returns the direction of the mobile device: "portrait" (the direction the device is held is vertical) or "landscape" (the direction the device is held is horizontal):

Example

$("window").on("orientationchange",function(event){
  alert("The direction is: " + event.orientation);
});

Try It Yourself

Since the orientationchange event is bound to the window object, we can use the window.orientation property to, for example, set different styles to distinguish between portrait and landscape views:

Example

$("window").on("orientationchange",function(){
  if(window.orientation == 0) // Portrait
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});

Try It Yourself

Tip:The window.orientation property returns 0 for portrait view and 90 or -90 for landscape view.