HTML5: Screen Orientation API

HTML5: Screen Orientation API

Media queries allow websites to adjust their la s based on their smartphones and tablets. But sometimes you want the website to be locked to a specific direction, landscape screen or landscape screen. At this time, the format of the native application can be specified. The APP is only displayed in the preset format-independent from the actual device direction. By using the HTML5 Screen Orientation API, you can define the Screen direction in JavaScript.

Define the screen direction for a document

You can adjust the screen direction by using the lock () method of the screen. orientation attribute. The default value is any, which allows the device to apply any direction based on its physical direction. The value "natural" will display the website in the natural direction of the device, depending on the device. A smartphone usually uses a landscape screen, while a tablet uses a landscape screen.

screen.orientation.lock(natural);

In the above example, set the natural direction for the device.
Of course, the Screen Orientation API also allows you to define an independent direction, which has four values to choose from. This includes all possible directions for mobile devices. The four values are:"Portrait-primary","Portrait-secondary","Landscape-primaryAndLandscape-secondary".

Shows the direction of all four values:"Portrait-primary","Portrait-secondary","Landscape-primaryAndLandscape-secondary".
For smartphones, the value portrait-primary is the same as the value natural, and is equivalent to the default direction. The value portrait-secondary rotates the Landscape mode by 180 °, so when you set it to another natural mode, the website looks almost upside down.

screen.orientation.lock(portrait-primary);

Similarly, landscape-secondary differs from landscape-primary in that the former rotates the screen by 180 °.
You can also use landscape and portrait as keywords instead of secondary and primary. This will allow devices (Portrait-primary,Portrait-secondaryOrLandscape-primary,Landscape-secondary.
To delete a defined direction, you can call the unlock () method.

screen.orientation.unlock();

Only used in full screen mode

Use screen. orientation has two requirements for defining the orientation of the screen. First, the lock () method takes effect only when the browser has switched to full screen mode through requestFullscreen (). Second, it is related to the first point, because full-Screen mode requires the user's permission rather than automatic switch, this is also applicable to the Screen Orientation API.
Therefore, for click events, bind these two methods.

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

It is very important to enable full screen mode before calling the lock () method, as shown in the preceding example. When the full screen mode is ended, the locked direction is released.
If you open a new document in the browser, for example, when you click a link, the defined direction ends with the full screen mode. The Screen Orientation API is only valid for the current document.

Read Orientation

You cannot always determine the direction in advance. Sometimes you only want to know the direction of your smartphone and tablet. In this case, you can use the Screen Orientation API to read the direction. The type property value is one of the keywords that display the positioning.

alert(screen.orientation.type);

The angle attribute can also display the angle of the direction.

alert(screen.orientation.angle);

The angle 0 is equivalent to the natural direction. The natural direction of most smartphones is portrait-primary; 90 ° is equivalent to landscape-primary; 180 ° is equivalent to portrait-secondary; 270 ° is equivalent to landscape-secondary. Angle represents different keywords for different devices.
To obtain the direction value, the browser needs to run in full screen mode.
You can change the screen direction through the change event. You only need to call addEventListener () to register the change event for the orientation attribute and add a function (as an event handler ).

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

Each screen direction change will trigger a pop-up box to display the current direction keyword and angle.

Browser support

The Screen Orientation API does not require a private prefix for 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 APIs.

if (orientation in screen) {  …}

The Screen Orientation API is a new API. Different method names are used in the early stages of API development. For example, use lockOrientation () instead of lock (), use unlockOrientation () instead of unlock (), and do not use these old method names in Chrome and Opera.
IE 11 + and Firefox 33 + also support the Screen Orientation API, but the corresponding private prefix is required.

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

In IE 11 + and Firefox 33 +, the event names for detecting direction changes are also different. You should use orientationchange with the corresponding prefix instead of change.
When using the Screen Orientation API, remember one more thing: Because Fullscreen API can only work together, you should not use it to design websites. For browser games or other applications that require full screen mode, it can have better results.