detect device orientation (JS)

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 happenes.

I would very much appreciate if someone could help me with this. I already spent quite some time on this and I'm sure it's just some silly little mistake, but I can't find it. Thank You! – Simon



Read more here: https://stackoverflow.com/questions/65715239/detect-device-orientation-js

Content Attribution

This content was originally published by Simon R. at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: