Screen Orientation is an HTML5 API that provides properties and methods to deal with the device orientation. It has been around for a while, however recently the W3C updated the spec in order to better organise the code.

So, in the most recent Working Draft, all the Screen Orientation API is defined under window.screen.orientation object. This new spec is currently supported only by Chrome 38+ and Opera 25+. Firefox 18+ (Desktop and Mobile) and IE11 supports the old syntax with vendor prefixes.

Keep in mind that this API is not final yet, so it may change again in the near future. Moreover, the MDN Screen.orientation article is not up-to-date at the time of writing, so it still refers to the old syntax.

Getting the current orientation

Old syntax (Firefox 18+ and IE11)
var orientation = screen.mozOrientation || screen.msOrientation;
New syntax (Chrome 38+ and Opera 25+)
var orientation = screen.orientation.type;

Locking the orientation

Before analyzing the implementation, let me highlight one thing: this will only work when the Fullscreen API is active! So, forget about using this API to prevent your website from changing orientation (for instance because the layout does not look good enough).
This API works in conjunction with the Fullscreen API in order to improve games and media consumption; it is not supposed to solve responsiveness layout issues.

Old syntax
var lockOrientation = screen.mozLockOrientation || screen.msLockOrientation;
Where “value” could be
portrait, portrait-primary, portrait-secondary
landscape, landscape-primary, landscape-secondary

Warning: the use of this syntax is discouraged because there are some serious bugs in Firefox Android that will make the browser crash or make the API behave wrongly.

New syntax
Where “value” could be
portrait, portrait-primary, portrait-secondary
landscape, landscape-primary, landscape-secondary

Warning: this new method returns a Promise. So if you need to do something after the orientation lock, you have to chain the call with .then(...).

Other API properties

The new syntax also has an unlock() method, an angle attribute and an onchange event handler.

This is a Working Draft so use with caution.