orientationchange event

Categories: Events

orientationchange eventversion added: 1.0

Description: Device portrait/landscape orientation event

  • jQuery( window ).on( "orientationchange", function( event ) { ... } )

    Additional properties on the event object:

    • orientation
      Type: String
      The new orientation of the device. Possible values are "portrait" and "landscape".

The jQuery Mobile orientationchange event triggers when a device orientation changes, either by turning the device vertically or horizontally. When bound to this event the callback function has the event object. The event object contains an orientation property equal to either "portrait" or "landscape".

Note that we bind to the browser's resize event when orientationchange is not natively supported or if $.mobile.orientationChangeEnabled is set to false.

orientationchange timing

The timing of the orientationchange event with relation to the change of the client height and width is different between browsers, though the current implementation will give you the correct value for event.orientation derived from window.orientation. This means that if your bindings are dependent on the height and width values you may want to disable orientationChange altogether with $.mobile.orientationChangeEnabled = false to let the fallback resize code trigger your bindings.

Example:

Visit this from your orientation-enabled device to see it in action!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>orientationchange demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
 
<h1 id="orientation">orientationchange Not Supported on this Device.</h1>
 
<script>
// Bind an event to window.orientationchange that, when the device is turned,
// gets the orientation and displays it to on screen.
$( window ).on( "orientationchange", function( event ) {
  $( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
});
 
// You can also manually force this event to fire.
$( window ).orientationchange();
</script>
 
</body>
</html>

Demo: