ScreenOrientation
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
* Some parts of this feature may have varying levels of support.
TheScreenOrientation interface of theScreen Orientation API provides information about the current orientation of the document.
AScreenOrientation instance object can be retrieved using thescreen.orientation property.
Instance properties
ScreenOrientation.typeRead onlyReturns the document's current orientation type, one of
portrait-primary,portrait-secondary,landscape-primary, orlandscape-secondary.ScreenOrientation.angleRead onlyReturns the document's current orientation angle.
Instance methods
ScreenOrientation.lock()Locks the orientation of the containing document to its default orientation and returns a
Promise.ScreenOrientation.unlock()Unlocks the orientation of the containing document from its default orientation.
Events
Listen to these events usingaddEventListener() or by assigning an event listener to theoneventname property of this interface.
changeFired whenever the screen changes orientation.
Example
In the following example, we listen for an orientationchange event and log the newscreen orientation type andangle.
screen.orientation.addEventListener("change", (event) => { const type = event.target.type; const angle = event.target.angle; console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`);});Specifications
| Specification |
|---|
| Screen Orientation # screenorientation-interface |