Detect device orientation (JS) (alpha, beta, gamma)

Question

I'm trying to detect the device-orientation , of mobile devices, using JavaScript.

I read the documentation, I read other StackOverflow questions, I watched videos on the subject, and this seems super simple, but I just can not get it to work…

This is my current code:

 function handleOrientation(event) { var absolute = event.absolute; var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma; document.querySelector(".deviceAbsolute").innerHTML = absolute; document.querySelector(".deviceAlpha").innerHTML = alpha; document.querySelector(".deviceBeta").innerHTML = beta; document.querySelector(".deviceGamma").innerHTML = gamma; } window.addEventListener("deviceorientation", handleOrientation, true);

 <,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Build 7</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> deviceAbsolute = <span class="deviceAbsolute">no input</span><br> deviceAlpha = <span class="deviceAlpha">no input</span><br> deviceBeta = <span class="deviceBeta">no input</span><br> deviceGamma = <span class="deviceGamma">no input</span> </body> </html>

I uploaded this code to my webspace and tested using iPhone and iPad but nothing happens.

EDIT:

I finally found a working demo: https://sensor-js.xyz/demo.html This works on my iPad and my iPhone, on Safari. – Now the problem is: How did they do it?

Answer 1

Take a look at this: https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope#example

let gyroscope = new Gyroscope({frequency: 60});

gyroscope.addEventListener('reading', e => {
  console.log("Angular velocity along the X-axis " + gyroscope.x);
  console.log("Angular velocity along the Y-axis " + gyroscope.y);
  console.log("Angular velocity along the Z-axis " + gyroscope.z);
});
gyroscope.start();

Detect device orientation (JS) (alpha, beta, gamma)

Question

EDIT:

1 answers

solution1
0 2021-01-14 08:00:03

Detect device orientation (JS) (alpha, beta, gamma)

Question

EDIT:

1 answers

solution1 0 2021-01-14 08:00:03

solution1
0 2021-01-14 08:00:03