我一直在为 my project 使用“deviceorientation”在 iPhone/iPad 上测试时,它在横向模式下表现正常,但在纵向模式下表现不规则。
以下是重复的步骤:
打开这个JSFiddle在您的 iPad/iPhone 上以纵向模式 -
移动设备,就好像您正在通过摄像头观察一样,从看脚下平移到看地平线,再到看天空
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 之一,以确保方向向量继续指向正确的方向。
让我们使用一个有效的例子,假设我们的起始设备方向是 {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
值发生翻转的原因,这是正确的行为而不是异常情况。
关于javascript - 修复 iOS Safari Javascript 'deviceorientation' 事件不规则性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22609518/