Screen lock challenge for Web application made easy

Orientation of mobile and tablets. source: http://khef.co

If you are stuck with screen lock complications for web application then you are at right place.

It is not recommended to force the user to lock screen in one screen orientation. But locking screen orientation is a necessity in some cases like - gaming, video contents, PDF contents.

We have three practical ways to achieve this:-

1. Using pure JavaScript API designed for modern browsers.
2. Using complete CSS code.
3. giving user a message to use in portrait mode.

Lets break these methods one by one.

1. Using pure JavaScript API:

This method has two restrictions:

1. Not supported in safari in iPhone.
2. It works only if the web application content is currently on full screen.

Lets see in detail about the JavaScript built in API ScreenOrientation.lock() and round about method for the browsers which do not support it.

ScreenOrientation.lock()

This API takes an argument that is the orientation in which you want to lock the screen in. The arguments can be one of the four standard orientations.
1. portrait-primary: normal
2. portrait-secondary: upside down
3. landscape-primary: bottom of device is on right
4. landscape-secondary: bottom of device is on left

Since Mobile screen can be locked only if the web application is in full screen mode, we need to make a proper strategy to use this API otherwise we will not get desired result.

1. first we need to check the orientation of the device.
2. force the content in full screen mode.
3. lock the screen in desired orientation.

Below is the code implementation using this API:

The complete code to lock the screen in landscape-primary mode

Now we will break down the code logic to make it simple to understand.

1. we are creating an event listener on screen orientation change. In this method we are using a all browser supported API window.orientation. It gives a numeric value for current orientation. This is how orientations are related with the numbers (this is actually the angle considering the normal orientation as 0 degree.)

window.orientation():

0 : portrait-primary

90: landscape-primary

180: portrait-secondary

270: landscape-secondary

2. If the orientation is not portrait-primary [in your case it can be different desired orientation], we call a function to request full screen for the content (it can be a video, pdf, gaming arena, or the whole page).

It may be possible that the fullScreen API is not supported in the current browser, in that case we can’t lock the screen [like, in case of safari in iPhone]

3. Once the Screen goes in full screen, we can lock the screen in our desired orientation with ScreenOrientation.lock() API. But in some browsers this api may not be supported. But the good news is, all of the modern browsers support this.

For browsers which does not support ScreenOrientation.lock() API, we can use CSS Code to create an ScreenLock effect.

2. Use complete CSS code to lock the screen:

To make this method work fine this is the Strategy we can adopt.

1. check the screen orientation
2. change the new design for screen orientation.

lets break down the code in parts.

we detect the orientation in CSS like this

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

screen locking makes sense in small screens only. (like- mobiles and tablets). for this reason we check the screen width with Media Queries.

If the device is below a fixed width and orientation is not not desired orientation, we rotate the screen using CSS animation method transform.

transform take values in angles with unit in degrees.

we will make width as height and height as width. But many CSS codes may need to change to give a good user experience.

Due to this reason it is not recommended to use CSS way as well. The best way is to give a user the message that use portrait mode for better user experience.

3. Giving user a message to use in portrait mode:

Above methods are not recommended to use in your web application. Giving message to the user to use either of portrait or landscape mode for better experience is a good option. The reason is that these API are not supported in all browsers versions.

Below is the complete flow to give a better user experience:

1. Detect the orientation of the user on orientation change. [Method is already in the first part.]
2. If the orientation is landscape and user should be in portrait mode for better experience. Show the user such message in place of locking it. (Reason: Screen lock is not supported in Safari on iPhone).

I hope this article helps you to clear your confusion on screen locking practical implementation. Thank you :)

References:

https://www.w3.org/TR/screen-orientation/

https://caniuse.com/#feat=screen-orientation/

Can I use... Support tables for HTML5, CSS3, etc