Html5:screen Orientation API

Media queries allow websites to adjust layouts based on the direction of smartphones and tablets. But sometimes you hope that the site is locked into a particular direction, a horizontal screen or a vertical screen, at which point the native app format can be specified. The app is only displayed in a preset format-independent of the actual device orientation. You can define the screen orientation in JavaScript by using the HTML5 Orientation API.

Define screen orientation for a document

The lock () method of the Screen.orientation property allows you to adjust the screen orientation, which defaults to any, which allows the device to apply any orientation according to its physical orientation. The value "natural" will display the site in the natural direction of the device, depending on the device. Smartphones typically use a horizontal screen, while tablets use a vertical screen.

screen.orientation.lock("natural");

In the example above, set the natural orientation for the device.
Of course, the screen Orientation API also allows you to define a separate direction with four values to choose from, which already contains all the possible orientations of the mobile device. These four values are: "portrait-primary", "portrait-secondary", "landscape-primary" and " Landscape-secondary".

Shows the direction of all four values: "portrait-primary", "portrait-secondary", "landscape-primary" and " Landscape-secondary".
For smartphones, the value portrait-primary and value natural are the same, and are equivalent to the default orientation. The value portrait-secondary rotates the horizontal screen mode by 180 °, so the site looks almost upside-down when set to other natural modes.

screen.orientation.lock("portrait-primary");

Similarly, landscape-secondary and landscape-primary differ in that the former rotates the screen 180°.
You can also use secondary and primary only, landscape and portrait as the keywords, which will allow the device to be in both directions (portrait-primary, Portrait-secondary or landscape-primary, landscape-secondary)-type display.
If you want to delete the defined direction, you can call the Unlock () method.

screen.orientation.unlock();

For full-screen mode only

There are two requirements for defining the orientation of the screen through Screen.orientation, the first: the Lock () method only works when the browser has switched to full-screen mode via Requestfullscreen (), and the second: and the 1th related, because full-screen mode requires the user's permission, Instead of automatic switching, the same applies to the screen Orientation API.
Therefore, for click events, you should bind both methods.

document.getElementById("button").addEventListener("click", function() {  document.documentElement.requestFullScreen();  screen.orientation.lock("portrait-primary"); }, false);

It is important to turn on full screen mode before calling the lock () method, as in the example above. Ending full screen mode releases the orientation of the lock.
If you open a new document in the browser, for example, when you click on a link, the defined orientation will end with full screen mode. The screen Orientation API is valid only for the current document.

Read orientation

You can't always predetermine directions, and sometimes you just want to know the direction of your smartphone and tablet. In this case, you can use the screen Orientation API to read the direction, and the type attribute value is one of the keywords that displays the positioning.

alert(screen.orientation.type);

You can also use the Angle property to display the angle of the direction

alert(screen.orientation.angle);

The angle of 0 equals to the natural direction, and the natural direction of most smartphones is portrait-primary;90° equivalent to landscape-primary;180° equivalent portrait-secondary;270° Equivalent to Landscape-secondary. Different devices, angle represent different keywords.
In order to get the direction value, the browser needs to run in full-screen mode.
Changing the screen orientation via the Change event is also possible, just call AddEventListener () to register the change event for the Orientation property and add a function (as an event handler).

screen.orientation.addEventListener("change", function(e) {  alert(screen.orientation.type" " + screen.orientation.angle);}, false);

Each change in the orientation of the screen triggers a bullet box that displays the current orientation key and angle.

Browser support

The screen Orientation API does not require a private prefix in Chrome 38+ and Opera 25+, but the API can only work on mobile devices. You can use an if statement to determine whether the browser supports the API

if ("orientation"in screen) {  …}

The screen Orientation API is a very new api,api in the early stages of development using different method names. For example: Using Lockorientation () instead of lock (), using unlockorientation () instead of unlock (), you should not use these old method names in Chrome and opera.
IE 11+ and Firefox 33+ also support the screen Orientation API, but require a corresponding private prefix

screen.msLockOrientation.lock("portrait-primary");screen.mozLockOrientation.lock("portrait-primary");

In IE 11+ and Firefox 33+, the event name of the detection direction change is also different, you should use the Orientationchange with the corresponding prefix, instead of changing.
When using the screen Orientation API, one thing to keep in mind is that you should not use it to design your site, because it works with Fullscreen APIs. For browser games or other applications that require full-screen mode, it can have a better effect.

Source: http://www.ido321.com/1572.html

This article is based on @denis Potschien's html5:screen Orientation API Uses Javascript to Rotate, the entire translation with my own understanding and thought, If the translation is not good or wrong, please peer friends pointing. If you want to reprint this translation, please specify the English source: http://www.noupe.com/design/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639.html

Html5:screen Orientation API