ScreenOrientation
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The ScreenOrientation
interface of the Screen Orientation API provides information about the current orientation of the document.
A ScreenOrientation
instance object can be retrieved using the screen.orientation
property.
Instance properties
ScreenOrientation.type
Read only-
Returns the document's current orientation type, one of
portrait-primary
,portrait-secondary
,landscape-primary
, orlandscape-secondary
. ScreenOrientation.angle
Read only-
Returns 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 using addEventListener()
or by assigning an event listener to the oneventname
property of this interface.
change
-
Fired whenever the screen changes orientation.
Example
In the following example, we listen for an orientation change
event and log the new screen orientation type and angle.
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 |
Browser compatibility
BCD tables only load in the browser