HTML5 screen orientation API to implement horizontal or vertical screens

Media inquiries allow the site to adjust the layout according to the direction of the smartphone and tablet. But sometimes you want to lock the site to a specific direction, horizontal or vertical screen, at which point the native application format can be specified. App is only shown in preset format-independent of the actual device orientation. By using the HTML5 screen orientation API, you can define the on-screen orientation in JavaScript.

Define the screen orientation for a document

The lock () method of the Screen.orientation property allows you to adjust the screen orientation with the default value of any, which allows the device to apply any direction in its physical direction. The value "natural" will display the Web site in the natural direction of the device, depending on the device. Smartphones usually use a horizontal screen, while a flat panel uses a vertical screen.

Screen.orientation.lock ("natural");

In the example above, set natural direction 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 directions for the mobile device. These four values are: "Portrait-primary", "Portrait-secondary", "Landscape-primary" and "Landscape-secondary" respectively.

The figure above shows the direction of all four values: "Portrait-primary", "Portrait-secondary", "Landscape-primary" and "landscape-secondary".
For smartphones, value portrait-primary and value natural are the same, and are equivalent to the default direction. The value portrait-secondary rotates the horizontal screen mode 180 °, so the site looks almost reversed when it is set to a different natural mode.

Screen.orientation.lock ("Portrait-primary");
Similarly, the difference between landscape-secondary and Landscape-primary is that the former rotates the screen to 180°.
You can also do without secondary and primary, only apply landscape and portrait as keywords, which will allow the device to die in both directions (Portrait-primary, Portrait-secondary or Landscape-primary, landscape-secondary)-type display.

If you want to delete the defined orientation, you can call the Unlock () method.

Screen.orientation.unlock ();
For Full-screen mode only
There are two requirements for defining the direction of the screen through Screen.orientation, first: the Lock () method works only if the browser has switched to Full-screen mode through Requestfullscreen (); second: and 1th, because Full-screen mode requires user's permission, Instead of switching automatically, the same applies to the screen orientation API.
Therefore, for the Click event, 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 direction of the lock.
If you open a new document in your browser, for example, when you click on a link, the direction defined will end with Full-screen mode. The screen orientation API is valid only for the current document.

Read orientation

You can't always predetermine the direction, and sometimes you just want to know the direction of smartphones and tablets. 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 display positioning.

alert (Screen.orientation.type);

You can also display the angle of orientation using the Angle property

alert (Screen.orientation.angle);

The angle of 0 is equivalent to the natural direction, the natural direction of most smartphones is portrait-primary;90° equivalent to landscape-primary;180° equivalent portrait-secondary;270° Equal to Landscape-secondary. Different devices, angle represent different keywords.
In order to get the orientation value, the browser needs to run in Full-screen mode.
Changing the orientation of the screen through the Change event is also possible by simply calling AddEventListener () to register the change event for the Orientation property and to 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 direction of the screen will trigger the frame, showing the current orientation keyword and angle.

Browser support
The screen orientation API does not require a private prefix for Chrome 38+ and Opera 25+, but the API only works on mobile devices. You can use an if statement to determine whether the browser supports APIs

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 (), 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 change in the direction of the event name is also different, you should use the Orientationchange with the corresponding prefix, instead of changing.
One thing to remember when using the screen orientation API is that you should not use it to design a Web site, because it works with the API fullscreen. It works better for browser games or other applications that require Full-screen mode.