修复iOS Safari Javascript 'deviceorientation‘事件异常？
我一直在my project上使用'deviceorientation‘，在iPhone/iPad上测试时，它在横向模式下运行正常，但在纵向模式下运行不正常。
以下是要重复的步骤：
- 以纵向模式在您的iPad/iPhone上打开此JSFiddle -
- 移动设备时，就好像您正在通过相机进行平移，从看您的脚到看地平线，再到看sky
- event.beta将从0 -> +/-90 -> 0
- 注意到当设备到达地平线时，event.gamma是如何跳跃的。E215=90<代码>H216F217
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.');
}回答 2
Stack Overflow用户
发布于 2014-09-18 20:16:53
当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值翻转的原因，这是正确的行为，而不是不正常的行为。
Stack Overflow用户
发布于 2018-09-11 04:24:54
这是一个欧拉角的“万向节锁”问题。当两个旋转环在角度上太接近时就会发生这种情况(本例中是gamma和alpha)，陀螺仪会以Euler角为单位返回值，在某些情况下，尽管3d方位角数据保持相对正确，但单个gamma可能会变得很远，并且会回到另一个轴上，因此您会发现gamma和alpha同时发生变化，但它们的总和保持不变。
解决这个问题的一种方法是制作一个矢量，并将旋转顺序设置为与陀螺仪相同，跟踪矢量并去掉不需要的维度，从而获得正确的伽马。
我们的想法是，不要只关注伽马本身，3d数据毕竟没有错，呈现形式导致了问题，你很难跳过或更改DeviceOrienationEvent的返回形式，剩下的唯一方法就是重新计算关于其他两个维度的正确值。
请原谅我糟糕的英语，希望能帮到你。
https://stackoverflow.com/questions/22609518
复制相似问题
腾讯云开发者
