Easy screen orientation management with the ScreenOrientation API

2024-08-13 / mgrubinger / 1 reactions

The ScreenOrientation API recently reached Baseline support. This is a very handy API to check for the current orientation of the users device as well as reacting to changing orientation.

Interface

Type

screen.orientation.type

lets you read the current device orientation (one of: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary)

Angle

screen.orientation.angle

lets you read the current device angle in degrees (0-360)

Change event

change

event to react to change in orientation, e.g. screen.orientation.addEventListener('change', handleOrientationChange)

Locks

ScreenOrientationAPI also lets you request on orientation lock. This could be useful for games and other experience requiring a stable orientation.

Browser support

Chromium-based browsers supported this API for ages, while Safari recently added support in v16.4. So make sure to check for screen.orientation before using this API.

Further reading

Managing screen orientation on MDN

Can I Use: Screen Orientation