The Gyroscope

part of The Standard

In the video, I talk about a few different gyroscope features. I talk about:

• using orientationchange to detect discrete orientation changes, landscape or portrait
• using deviceorientation to listen to the device’s orientation in 3D space
• and using devicemotion to detect gestures.

This is a short article that expands on orientationchange, I’ll provide info on the different axes, and how to use deviceorientation to build a basic compass 🗺🤔 . Remember, this article is about your phone—not your desktop or laptop, which probably doesn’t have a gyro.

Discrete orientation determination

A mobile device’s discrete orientation might either be in landscape (wider than tall) or portrait (taller than wide). If a user locks their rotation, the device will stay in either mode, even as the device is moved around.

To keep it simple, listen to changes using the orientationchange event, and even then, landscape mode is pretty much defined as:

const isLandscape = (window.innerWidth > window.innerHeight);

⚠️ This simple definition is important, as the CSS media query @media (orientation: portrait) (and landscape) also works this way.

… however, there’s an exception: on mobile devices, a onscreen keyboard ⌨️ may take up space such that a portait device has smaller width than height. Suddenly, your webpage will believe it’s in landscape mode. I think 💬 it’s actually not worth worrying—but if you do want to be sure, you can:

1. measure window.screen.orientation (prefixed, not all browsers)
2. and measure window.orientation (deprecated, but supported by Safari).

isLandscape, a helper method using two APIs to determine device orientation

Oblique observation

To be fair, most websites won’t need to measure a device’s exact orientation in 3D space. But if you’re building a game, or a non-standard experience, you have the power to do interesting things.

You can get the alpha, beta and gamma values via the devicemotion event. Note that they’re relative to the way your device is held—this example shows the values when a device is held ✋ facing you. (Other resources assume the phone is flat on a table—this is rarely how people a phone.)

The two values alpha and beta won’t interfere with each other — that is, rotating your phone like a compass or tilting it forward and back won’t cause any other value to change very much. However, if you lean your phone — the gamma value — all bets are off. I’m not a math guru, but alpha and beta will change in ways you can’t trivially assess.

To build a compass out of your device, you’ll want to copy and paste some code from the spec itself. (If your phone was always perfectly level 📏, you could just use alpha — but it’s not, so you can’t). There’s a caveat—most devices don’t set the absolute property—this means that while your compass will work, ‘north’ won’t be accurate. Instead, north (zero degrees) will be an arbitrary, fixed point around you.

If you’re on a mobile device right now, click here to try out the demo. 📱

Your device may not be as accurate as this

As you saw in the video, another good use-case for deviceorientation is for input to an HTML game. In my case, I simply read the gamma value: if it’s zero, then the phone is pointing straight up—otherwise, I set the horizontal gravity in my physics simulation to gamma / 80.

The value ‘eighty’—even my choice of gamma—is somewhat arbitrary, but it works well. I personally suggest keeping it simple, and just experimenting until you find a value that feels right.

Summary

This is a short article, and it won’t be for every site. Most websites don’t need to specifically change their behavior based on their orientation—if you have a responsive design, you’re doing well. ✅

There’s a also a wealth of other resources out there on Google. Good luck!

Do you have questions?

Please leave your comments and queries in Medium, or contact me on Twitter. I’m always happy to hear your suggestions or improvements. 👨‍💻