Untitled

<html>
<head>
</head>
<script language="JavaScript">
  window.onload = () => {
    const h = document.getElementById('h');
    const a = document.getElementById('a');
    const b = document.getElementById('b');
    const g = document.getElementById('g');
    window.addEventListener('deviceorientation', (e) => {
      const {
        webkitCompassHeading
        , alpha
        , beta
        , gamma
      } = e;

      h.innerText = `webkitCompassHeading: ${webkitCompassHeading}`;
      a.innerText = `alpha: ${alpha}`;
      b.innerText = `beta: ${beta}`;
      g.innerText = `gamma: ${gamma}`;
    })
  }
</script>
<body>
<h1 id="h"></h1>
<h3 id="a"></h3>
<h3 id="b"></h3>
<h3 id="g"></h3>

</body>
</html>