short: No more matchMedia to check screen orientation
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.
short: No more matchMedia to check screen orientation
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.typelets you read the current device orientation (one of:
portrait-primary,portrait-secondary,landscape-primary,landscape-secondary)Angle
screen.orientation.anglelets you read the current device angle in degrees (0-360)
Change event
changeevent 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.orientationbefore using this API.Further reading
Managing screen orientation on MDN
Can I Use: Screen Orientation