修复iOS Safari Javascript’deviceorientation’事件异常？

我一直使用my project的“ deviceorientation”,并且在iPhone / iPad上进行测试时,它在横向模式下正常运行,而在纵向模式下则存在不规则性.

以下是重复的步骤：

>以纵向模式在iPad / iPhone上打开此JSFiddle–
>移动设备,就好像您正在看摄像机一样,从注视脚,到地平线,到天空都可以平移
> event.beta将从0开始-> / -90-> 0
>请注意,当设备到达地平线时event.beta会围绕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反转时,必须同时将另一个角度反转应用于其他角度之一,以确保方向矢量继续指向正确的方向.

让我们使用一个有效的示例,并说我们的起始设备方向为{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值发生翻转的原因,这是正确的行为,而不是不规则的行为.

标签：device-orientation,html5,ios,javascript,iphone
来源： https://codeday.me/bug/20191121/2055698.html