In the video, I talk about a few different gyroscope features. I talk about:
orientationchangeto detect discrete orientation changes, landscape or portrait
deviceorientationto listen to the device’s orientation in 3D space
- and using
devicemotionto 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:
window.screen.orientation(prefixed, not all browsers)
- and measure
window.orientation(deprecated, but supported by Safari).
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
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
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
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. 📱
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.
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. 👨💻