HTML5设备定位 - 可靠的罗盘实现？

Question

我正在开发一个移动网络项目，需要知道用户设备指向的罗盘方向。它现在非常简单，但这就是我所拥有的：

        var updateDirection = function (evt) {
            $("#direction").val(evt.alpha);
        };

        window.addEventListener("deviceorientation", updateDirection);

根据我迄今为止所研究的内容，事件的alpha通道应该是罗盘位置。但是，我观察（并阅读）了基于操作系统和浏览器的各种实现。

• 在我的HTC智能手机上，在Chrome或默认的Android浏览器中，当我将手机完全垂直放在“自拍”位置时，我只能获得合理的读数（0度=北，90 =东，等等）。手机的任何角度都会使读数相当远。
• 在使用Chrome的Surface Pro上，我无法获得大于50的读数。
• 在使用Edge的Surface Pro上，我得到了非常合理的读数，但只有当我将设备保持水平时，就好像它放在桌子上一样。

似乎人们已经在移动浏览器中获得指南针方向，无论设备如何。 我可以使用一些库来执行此操作吗？或者是否有必要简单地编写许多不同的特定场景，就像这个例子一样，它也不适用于列出的所有设备：

Device Orientation Events

Answer 1

您是否真的有必要使用javascript来查找方向？

您可以使用CSS media queries

获得相同的结果