Detecting device Direction

Listening to the deviceorientation

window.addEventListener("deviceorientation", handleOrientation, true);
Copy the code

The event contains the following values

attribute describe
type Event type.
bubbles Whether the event bubbles normally
cancelable Can this activity be cancelled?
alpha The current direction of the device about the Z-axis; That is, how far the device rotates around a line perpendicular to the device.
beta The current direction of the device around the X-axis; That is, how far forward or backward the device is tilted.
gamma The current direction of the device about the Y-axis; That is, how far the device turns left or right.
absolute The value is the value if the direction is provided as a difference between the device coordinate system and the Earth coordinate system; This value is false if the device cannot detect the earth coordinate system.

Focus on these four return values

  • alpha
  • beta
  • gamma
  • absolute

The axis of the mobile phone is shown as follows:

1. Understand Alpha

Alpha is the direction of the device around the Z-axis

It ranges from 0 to 360 degrees. When the top of the device points due north, the value of this attribute is 0.

Namely, rotate around the vertical axis of the mobile phone screen as shown in the figure below:

2. Understand beta

Beta is the direction of the device around the X-axis

It ranges from minus 180 to 180 degrees. When the device is parallel to the earth’s surface, the value of this attribute is 0.

Namely, rotate around the axis of the parallel volume key as shown in the figure:

Understand gamma

Gamma is the direction of the device about the Y-axis

It ranges from -90 to 90 degrees. When the device is parallel to the earth’s surface, the value of this property is 0.

Namely, rotate around the axis of parallel charging port as shown in the figure:

4. Understand absolute

Absolute is used to determine if it is an earth coordinate system.

Return true if the current device coordinate system corresponds to the Earth coordinate system, false otherwise;

When the return value is true, other coordinates can be used as the reference

conclusion

Alpha => rotate around the axis of the vertical phone screen beta => rotate around the axis of the parallel volume keys gamma => rotate around the axis of the parallel charging port Absolute => Return whether it corresponds to the earth coordinate systemCopy the code

Sample code:

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation".function(event) {// alpha: Rotation Angle around the axis perpendicular to the phone screen var rotateDegrees = event.alpha; Var leftToRight = event.gamma; Var frontToBack = event.beta; var frontToBack = event.beta; handleOrientationEvent(frontToBack, leftToRight, rotateDegrees); },true);
}

var handleOrientationEvent = functionFrontToBack, leftToRight, rotateDegrees) {// Play a Hawaiian guitar};Copy the code

For browser compatibility, refer to the MDN instructions when using