修复iOS Safari Javascript'deviceorientation'事件的不规则性？ [英] Fixing iOS Safari Javascript 'deviceorientation' event irregularity?

问题描述

我一直在使用'deviceorientation'来我的项目并在测试时iPhone / iPad，它在横向模式下表现正常，但在纵向模式下有不规则性。

I've been using 'deviceorientation' for my project and when testing on iPhone/iPad, it behaves normally in landscape mode, but has an irregularity in portrait mode.

以下是重复步骤：

• 在iPad上打开 JSFiddle / iPhone处于纵向模式 -

• Open this JSFiddle on your iPad/iPhone in portrait mode -

将设备移动，就好像您正在通过相机观看并从观察脚部，观察地平线，到望着天空

Move the device as though you are looking through the camera and panning from looking at your feet, to looking at the horizon, to looking at the sky

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

event.beta will go from 0 -> +/-90 -> 0

注意当 event.beta = 90时 event.gamma 在设备到达地平线时跳转的方式 p>

Notice how the event.gamma jumps when the device reaches the horizon, around when event.beta = 90

Q1：我如何调整此行为？

Q1: How can I adjust for this behaviour?

Q2：有没有办法获得确定的价值（例如。 0-180）从地面到天空在这个方向上移动？

Q2: Is there any way to get a definitive value (eg. 0-180) for movement in this direction, from ground to sky?

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.');
}

推荐答案

alpha，beta和gamma当组合在一起产生一个方向向量，指示设备在哪个方向指向。

The alpha, beta and gamma values when combined together produce a direction vector that indicates in which direction a device is 'pointing'.

在你的例子中，当 event.beta 超过+/- 90度的值提示，然后 event.alpha 值将自行反转。 event.alpha 是设备的标题，指向屏幕顶部，因此当您到达地平线时设备的标题会翻转。当 event.alpha 反转时，必须同时将另一个角度反转应用于其他角度之一，以确保方向向量继续指向正确的方向。

In your example, when the event.beta value tips over +/-90 degrees then the event.alpha value will invert itself. event.alpha is the heading of the device pointing out of the top of the screen so the heading of the device flips when you hit the horizon. When event.alpha inverts then another angle inversion MUST be simultaneously applied to one of the other angles to ensure that the direction vector continues to point in the right direction.

让我们使用一个有用的例子，说我们的起始设备方向是 {alpha：270，beta：89.9，gamma：0} 。我们可以通过首先围绕 alpha 值旋转来确定方向向量，然后是 beta 值，最后是 gamma 值。如果我现在将设备旋转到地平线以上，根据您上面提供的说明，设备的标题将从270度翻转到90度。

Let's use a worked example and say our starting deviceorientation is {alpha: 270, beta: 89.9, gamma: 0}. We can determine the direction vector by first rotating around the alpha value, then the beta value and finally the gamma value. If I now rotate my device above the horizon, according to the instructions you provided above, then the heading of the device will flip from 270 degrees to 90 degrees.

在这个新方向，数据不能 {alpha：90，beta：89.9，gamma：0} 因为如果我们使用这些值来确定方向向量（就像我们上面所做的那样），我们会注意到方向向量现在指向的位置与它应该的方向相反。因此，实现执行另一轴的同时翻转以考虑一个轴的这种翻转以确保方向向量继续在正确方向上指向。

In this new orientation the data can NOT be {alpha: 90, beta: 89.9, gamma: 0} because if we use these values to determine the direction vector (in the same way we did above) we will notice that the direction vector now points in the opposite direction to where it should be. Thus, implementations perform a simultaneous flip of another axis to account for this flip of one axis to ensure the direction vector continues to 'point' in the right direction.

iOS因此，实现将此新方向的数据设置为 {alpha：90，beta：89.9，gamma：180} ，然后方向向量继续指向正确的方向。

The iOS implementation thus sets the data in this new orientation to {alpha: 90, beta: 89.9, gamma: 180} and then the direction vector continues to point in the correct direction.

这就是你观察到原始 event.gamma 值翻转的原因，这是正确的行为而不是违规行为。

This is the reason you have observed a flip on the raw event.gamma value and this is the correct behaviour and not an irregularity.

这篇关于修复iOS Safari Javascript'deviceorientation'事件的不规则性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！