我一直在为my project使用'deviceorientation'，在iPhone / iPad上测试时，它在横向模式下表现正常，但在纵向模式下有不规则性。
以下是重复的步骤：
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.');
}
当组合在一起时，α，β和伽马值产生方向向量，该向量指示设备在哪个方向“指向”。
在您的示例中，当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值翻转的原因，这是正确的行为，而不是不规则。
这是欧拉角的“万向节锁定”问题。当两个旋转环的角度过于接近时（这种情况下，伽玛和阿尔法），陀螺仪返回欧拉角的值，在某些情况下虽然三维方位角数据保持相对正确，但单个伽马可能会远离，它会在另一个轴上回来，所以你会发现伽玛和阿尔法同时发生变化，但它们的总和仍然保持不变。
解决这个问题的一种方法是制作一个矢量并设置与陀螺仪相同的旋转顺序，跟踪矢量并摆脱不需要的尺寸，从而获得正确的伽玛。
这个想法不只是专注于伽玛本身，三维数据毕竟没有错，呈现形式导致问题，你很难跳过或改变DeviceOrienationEvent的返回形式，唯一的方法就是重新计算正确的值就其他两个方面而言。
原谅我可怜的英语，希望能帮助你。