Question

以下代码片段中的alpha值应根据设备的轮换在0到360之间变化：

window.addEventListener('deviceorientation', function(eventData) {
    var LR = eventData.gamma;
    var FB = eventData.beta;
    var DIR = eventData.alpha;

    deviceOrientationHandler(LR, FB, DIR);
});

这种变化应取决于它所面对的风向。为此，该设备使用磁力计/指南针。

当我在ipad 3上测试时，我遇到了以下问题：

它从0到360不等，但是以相对的方式。页面在加载时显示为0，然后在0到360之间变化。但是当设备旋转并刷新页面时，它再次通过显示0开始，然后在这些值之间变化。

因为它应该遵循风向，我试图找出北方的位置，我需要它以绝对的方式而不是相对的方式来做到这一点。 AKA：面向某处时始终显示相同的值，无论装入页面时设备面向何时以何种方向。

这些scource表明API应具备以下功能：

html5rocks

这一个：

W3C

这是一个例子，当面向北方时“方向”应为0（或至少返回一致的值）：

html5rocks页面包含一个示例（ctrl + f和“try it out”）。无法发布超过2个URL

这是指示设备面向风向的正确方法吗？我需要将其与Google Maps Api结合使用。

最后我知道Ipad 3有罗盘应用程序，所以设备应该能够做到这一点。

我很困惑：）

Answer 1

根据W3C：

无法为三个角度提供绝对值的实现可以改为提供相对于某个任意方向的值，因为这可能仍然有用。在这种情况下，绝对属性必须设置为false。否则，绝对属性必须设置为true。

Answer 2

这是一个老问题，但由于过去几年的一些变化（浏览器更新），我遇到了同样的问题。有两种方法可以解决这个问题：

设备定位绝对

https://developers.google.com/web/updates/2016/03/device-orientation-changes

（适用于Opera上的opera，chrome，maxthon）

带校准的设备方向

使用设备动作或HTML5 watchLocation运动检查指南针北方

Answer 3

使用Mobile Safari（iOS）时，alpha基于首次请求设备方向时设备指向的方向。因此，当您在iPad显示东方时激活deviceorientation侦听器，则在东方时alpha为0。要获得正确的罗盘方向，您需要在iOS上使用webkit参数webkitCompassHeading。所有其他浏览器都接受alpha作为罗盘方向。为了支持他们所有人：

var compassdir;
if(eventData.webkitCompassHeading) {
  compassdir = eventData.webkitCompassHeading;
}
else compassdir = eventData.alpha;

HTML 5移动设备方向API：Alpha（罗盘）值不表示北

3 个答案: