Introduction to discrete orientation change

Discrete Orientation change refers to the change in the orientation of a device. To be precise from landscape to portrait or vice versa. So what is so new in this?  In order to change certain things on the web page, you require detecting the orientation of the page. This is a very powerful API and can help you in various ways while you use it in different applications. The applications where you can use it are as follows:-

  1. Developing a game on the browser
  2. Having a WebGL implementation
  3. For WebVR
  4. For WebAR

Just to mention these are few of the places where you can make use of the orientation. As we refer in the title of this post, these orientation are discrete in nature, that means these are small changes that are being triggered when the orientation of the device changes. Now let’s go ahead and code something up and use an emulator to see the results.

NOTE: You can apply CSS Styles using Media Query for Portrait and Landscape modes but in order to detect and orientation and use JavaScript in order to Push it into the DOM you require a way to detect the Orientation.

Implementation of discrete orientation change

In order to implement the discrete orientation change, we will be using the event orientationchange provided to us by the Web Platform itself. This event can help us in detecting whether the device has changed its orientation. Let’s get onto coding this out.

By just writing the above piece of code we can easily get the angle of the device orientation. It’s pretty easy to get started. You can see the implementation in below in the emulator as a GIF. You can alternatively go to Code Pen. You can also go ahead and Open this Link on Mobile to Test.

Discrete Device Orientation

Discrete Device Orientation

Now how can you use it in order to know which orientation the device is in? That’s pretty easy I have implemented a sample below to make you understand that as well.

Is it Landscape or portrait?

Let’s implement a small program in order to see is it in landscape or portrait mode. We will infer this from the below-mentioned analogy.

  1. If the width of the device is greater than the height its landscape.
  2. If the width of the device is less than height its portrait.

So the HTML template which we are using for this will look like

The JavaScript code will go as follows:-

This code, when running on a mobile browser, will render as shown in the GIF. You can alternatively have a look at the CodePen Sample as well. You can also Open this link on Mobile.

Discrete Device Orientation - With Change in Text

Discrete Device Orientation – With Change in Text

Conclusion

In order to conclude you can see that it does not require any special plugin or any special framework to understand whether the device is in the Landscape or the Portrait mode. It just takes a simple event listener that will help in to bring value to your web application.


Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This