修复iOS Safari中Javascript的'deviceorientation'事件不规则问题？

Question

我一直在使用“deviceorientation”来完成我的项目，在iPhone/iPad上测试时，在横屏模式下表现正常，但在竖屏模式下有不规则性。

以下是重复步骤：

• 在您的iPad/iPhone上以竖屏模式打开此JSFiddle -

• 移动设备，就像您正在通过相机观察，并从看脚、看地平线、看天空进行平移

• event.beta将从0->+/-90->0

• 注意当设备到达地平线时，大约在event.beta=90时，event.gamma会跳动

Q1：如何调整此行为？

Q2：是否有任何方法可以获得此方向上的明确值（例如0-180）从地面到天空的移动？ HTML

<b>e.alpha :</b> <span id='alpha'></span><br/>
<b>e.beta :</b> <span id='beta'></span><br/>
<b>e.gamma :</b> <span id='gamma'></span><br/>

JS

function deviceOrientationHandler(e){

  var a = document.getElementById('alpha');
  var b = document.getElementById('beta');
  var g = document.getElementById('gamma');

  a.innerText = e.alpha;
  b.innerText = e.beta;
  g.innerText = e.gamma;
}

if (window.DeviceOrientationEvent) {

  window.addEventListener('deviceorientation', deviceOrientationHandler, false);

}else{

  console.error('Device orientation not supported in this browser.');
}

- kaigani

---

我有同样的问题。在竖屏模式下，设备感觉像被倒置了（屏幕面对天空与地面的转换）。在这个数厘米的不确定区域内，alpha值会跨越虚拟的圆圈到相反的位置。这种情况在横屏模式下从未发生过。@kaigani你是否在其他地方找到了解决方法？ - Petr Vostrel

我现在正在处理这个问题，最棘手的部分是当beta值达到90时，并不是一个干净的跳跃。实际上，在88-90之间的区域都是模糊的。我正在寻找一种解决方案来计算差异并相应地调整我的伽马值。 - Ryan Ore

Answer 1

alpha、beta 和 gamma 值结合在一起可以产生一个方向向量，指示设备“指向”哪个方向。例如，在您的示例中，当 event.beta 值超过 +/-90 度时，event.alpha 值将反转。event.alpha 是指出屏幕顶部的设备朝向，因此当您触及地平线时，设备的朝向会翻转。当 event.alpha 反转时，必须同时将另一个角度反转，以确保方向向量继续指向正确的方向。

让我们使用一个实例来说明：假设我们的初始设备方向是 {alpha: 270, beta: 89.9, gamma: 0}。我们可以通过先绕 alpha 值旋转，然后绕 beta 值旋转，最后绕 gamma 值旋转来确定方向向量。现在，如果我将设备旋转到地平线以上，根据您提供的指示，设备的朝向会从 270 度翻转到 90 度。

在这种新的方向下，数据不能是 {alpha: 90, beta: 89.9, gamma: 0}，因为如果我们使用这些值来确定方向向量（就像上面那样），我们会发现方向向量现在指向与应该指向相反的方向。因此，实现会同时翻转另一个轴以解决这个轴的翻转，以确保方向向量继续“指向”正确的方向。

因此，iOS 实现将数据设置为 {alpha: 90, beta: 89.9, gamma: 180}，然后方向向量就会继续指向正确的方向。这就是您观察到原始 event.gamma 值发生翻转的原因，而这也是正确的行为，而不是异常情况。

- richt

---

你如何“将 alpha、beta 和 gamma 结合起来以获得方向向量”？ - user151496

Answer 2

这是欧拉角的“万向锁”问题。当两个旋转环的角度过于接近时（在此情况下为gamma和alpha），陀螺仪以欧拉角返回值，在某些情况下，虽然3D方位数据保持相对正确，但一个单独的gamma可能会远离原来的轴，并回到另一个轴上，因此您会发现gamma和alpha同时变化，但它们的总和仍保持不变。

解决方法之一是制作一个向量并将旋转顺序设置与陀螺仪相同，跟踪该向量并摆脱您不需要的维度，从而获得正确的gamma。

思路是不要只关注gamma本身，毕竟3D数据并没有错误，问题出在呈现形式上，您几乎无法跳过或更改DeviceOrientationEvent的返回形式，唯一剩下的方法是根据其他两个维度重新计算正确的值。

请原谅我的英语差，希望能帮助到您。

- wsxmax