Contents hide 1) Detecting device orientation 1.1) Browser Compatibility 1.2) Capturing events 2) The Alpha, Beta, and Gamma Angles 3) Request For Enabling Device Orientation 3.1) Orientation using chrome dev tools 4) Browser support In this tutorial, we see the hidden gem that is Detecting device orientation in Web Using Javascript. you need to make sure your browser supports it. You can easily check caniuse.com. Code & Demo Works Better in Mobile Detecting device orientation It allows a device to detect its physical orientation with respect to gravity. If you ever see that on rotating the screen the device shows the effects mostly on mobile phones. Orientation is measured using three sides – alpha, beta, and gamma. Browser Compatibility We can check that if the browser supports the device orientation API by just writing the conditional code. JavaScript if (window.DeviceOrientationEvent) { // Browser supports DeviceOrientation } else { console.log("Sorry, your browser doesn't support Device Orientation"); } It can be really useful for use cases like gaming – for controlling a character or an object and even for gesture recognition in web applications for enhanced accessibility. Capturing events The event is emitted whenever a significant change occurs in orientation. Note: The events are only fired in a secure browsing context (https). JavaScript window.addEventListener("deviceorientation", (e) => { console.log(e); }); The Alpha, Beta, and Gamma Angles Device orientation defines the following rotations along the 3 axes – Z-axis is called Alpha X-axis is called Beta Y-axis is called Gamma The change in orientation returned by the event is expressed in terms of these values – Alpha, Beta, and Gamma. Request For Enabling Device Orientation In most mobile browsers it doesn’t allow access to sensor data due to security reasons. It can only be available for use by the web page after the user has granted permission to access the orientation data. For requesting user permission to access the orientation data, the Permissions API can be used as follows – JavaScript if (DeviceMotionEvent.requestPermission) { DeviceMotionEvent.requestPermission() .then(response => { if (response == "granted") { window.addEventListener("deviceorientation", function(e) { const { alpha, beta, gamma } = e; document.getElementById("alpha").innerText = alpha.toFixed(0); document.getElementById("beta").innerText = beta.toFixed(0); document.getElementById("gamma").innerText = gamma.toFixed(0); }); } else { alert('Device orientation permission not granted'); } }).catch((err) => {console.log(err)}); } else { alert("Device motion permission access method not available"); } Orientation using chrome dev tools To simulate the device orientation we can make use of the chrome dev tool in-built device orientation sensor and simulates in different angles such as portrait, landscape, etc. To Open the simulator on desktop first open the developer’s console the press Command+Shift+P (Mac) or Ctrl+Shift+P (Windows or Linux) to open the command menu. Type “sensors” and select show sensors. Then from the Orientation list select the custom orientation option. Browser support As of now, the API is work in progress and is subject to change but the events themselves are supported by all modern browsers. Get More tutorials on JavaScript Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Device Orientation API, JavaScript