JSFiddle - React, Tailwind, and code Playground

HTML

<div> leftRightAngle: <b id="leftRightAngle"></b></div>
<div> frontBackAngle: <b id="frontBackAngle"></b></div>

JavaScript

var leftRightAngle,frontBackAngle;

if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function (e) {
        // 我们从事件“e”中获取角度值并转化成弧度值。
        leftRightAngle = e.gamma / 90.0 * Math.PI / 2;
        frontBackAngle = e.beta / 90.0 * Math.PI / 2;
        document.getElementById('leftRightAngle').innerHTML = leftRightAngle;
        document.getElementById('frontBackAngle').innerHTML = frontBackAngle;
    }, false);
} 
else if (window.OrientationEvent) { //另一个选项是Mozilla版本同样的东西
    window.addEventListener('MozOrientation', function (e) {
        //在这里将长度值当做一个单位，并转换成角度值，看起来运行的不错。
        leftRightAngle = e.x * Math.PI / 2;
        frontBackAngle = e.y * Math.PI / 2;
        document.getElementById('leftRightAngle').innerHTML = leftRightAngle;
        document.getElementById('frontBackAngle').innerHTML = frontBackAngle;
    }, false);
} 
else {
    // 自然地，没有浏览器支持的大多数人会获取这个。
    setStatus('Your device does not support orientation reading. Please use Android 4.0 or later, iOS (MBP laptop is fine) or similar platform.');
}