Screen Orientation

This feature is supported in mobile applications only.

You can manage the screen orientation state through the Screen interface.

The main features of the Screen Orientation API include:

• Accessing the current screen orientation

  You can use the current screen orientation information, for example, to define the visibility or dimensions of the HTML elements according to the orientation state. You can retrieve the state with the screen.orientation attribute.

  The following code snippet demonstrates how to access the current screen orientation information.

  var currentScreenOrientation = screen.orientation;
  

  The orientation can be portrait-primary, portrait-secondary, landscape-primary, or landscape-secondary.

• Reacting to screen orientation changes

  To receive notifications of the screen orientation changes, add an event listener to the Screen object, or assign a function reference to the screen.onorientationchange attribute.

  The following code snippet demonstrates how to receive notifications of screen orientation changes.

  /* Add listener */
  screen.addEventListener("orientationchange", handleScreenOrientationFun, false);
  
  /* Or assign reference */
  screen.onorientationchange = handleScreenOrientationFun;
  

  In the above example, the handleScreenOrientationFun is the event handler called when the screen orientation changes.

• Locking the screen to a specified orientation

  Locking means that the rendering of the current browsing context is forced to be shown in the specified orientation. The screen remains in the selected orientation state until the lock is removed.

  Lock the screen with the lockOrientation() method.

  The following code snippet demonstrates how to lock the screen to a specified orientation.

  screen.lockOrientation("portrait-secondary");
  

  The method accepts the following parameter values: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, and landscape.

  Note
  When using the screen orientation lock: When the portrait value is used to lock the orientation, the orientation can change between portrait-primary and portrait-secondary. The landscape value behaves similarly. Depending on the browser, unlocking the screen orientation may have no visual effect.