Easy screen orientation management with the ScreenOrientation API
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.