html5+JQ mobile web how to initialize the gyroscope problem

Question

html5+JQ mobile web how to initialize the gyroscope problem

Happy new year teachers and good health

I plagiarized a previous ARSkyBox webpage The gravimeter part seems to be worse than mine The normal screen that should be forward has changed downward, and the xyz is wrong. I don't know how to fix Is it possible to initialize the gravimeter? Or does it not need to be modified at all?

this is the code https://codepen.io/ikbbceme-the-sassster/pen/wvPzGBV

thanks

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="wvPzGBV" data-editable="true" data-user="ikbbceme-the-sasster" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ikbbceme-the-sasster/pen/wvPzGBV">
  ? html5+JQ web mobile terminal how to initialize the gyroscope problem</a> by 莫瑞琪 (<a href="https://codepen.io/ikbbceme-the-sasster">@ikbbceme-the-sasster</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>