修复iOS Safari的“deviceorientation”事件不规范？
我一直在使用'deviceorientation'作为我的项目 ，当在iPhone / iPad上testing时，它在横向模式下performance正常，但在纵向模式下有不规则性。
以下是重复的步骤：
-
以纵向模式在iPad / iPhone上打开此JSFiddle –
-
移动设备，就好像你正在通过摄像机看，看着你的脚，看着地平线，仰望天空
-
event.beta将从0 – > +/- 90 – > 0
-
注意event.gamma在设备到达地平线的时候跳跃，当event.beta = 90时
问题1：如何调整这种行为？
问题2：从这个方向，从地面到天空，是否有任何方法可以获得确定的值（例如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.'); }
alpha，beta和gamma值在组合在一起时会产生一个方向向量，指示设备在哪个方向上“指向”。
在你的例子中，当event.beta值超过+/- 90度时， event.alpha值会自动反转。 event.alpha是设备指向屏幕顶部的标题，因此设备标题在您触及地平线时会翻转。 当event.alpha反转时，另一个angular度反转必须同时应用到其他angular度之一，以确保方向vector继续指向正确的方向。
让我们使用一个工作的例子，说我们的起始deviceorientation是{alpha: 270, beta: 89.9, gamma: 0} 。 我们可以先确定方向vector，首先围绕alpha值旋转，然后是beta值，最后是gamma值。 如果我现在将设备旋转到地平线以上，根据您上面提供的说明，设备的标题将从270度翻转到90度。
在这个新的方向中，数据不能是{alpha: 90, beta: 89.9, gamma: 0}因为如果我们使用这些值来确定方向vector（就像我们上面做的那样），我们会注意到现在的方向vector指向相反的方向应该在哪里。 因此，实施方式执行另一个轴的同时翻转以说明一个轴的翻转，以确保方向vector在正确的方向上继续“指向”。
因此，iOS实现将这个新方向的数据设置为{alpha: 90, beta: 89.9, gamma: 180} ，然后方向vector继续指向正确的方向。
这是你观察到原始event.gamma翻转的原因。 event.gamma值，这是正确的行为，而不是一个不规则。