2

我正在使用 JavaScript 中的设备方向，我注意到我的 Ipad (iOS 6.1) 和我的 Nexus7 (Android 4.2.2) 之间存在一些差异。

此代码不会在 Ipad 和 Nexus7 上打印相同的数据。

<html>
  <head/>
  <body>
    <button id="calibrate">Calibrate</button>
    <button id="stop">Stop</button>
    <button id="play">Play</button>
    <div id="log"><p></p></div>
    <script>
      var log = document.getElementById('log');
      var calibrate = false;
      var calibrateG = 0, calibrateB = 0, calibrateA = 0;

      var deviceorientation = function(e) {
        if (calibrate) {
          calibrateG = e.gamma;
          calibrateB = e.beta;
          calibrateA = e.alpha;
          calibrate = false;
        }

        var gamma = parseInt(e.gamma - calibrateG);
        var beta = parseInt(e.beta - calibrateB);
        var alpha = parseInt(e.alpha - calibrateA);

        var p = document.createElement('p');
        p.innerHTML = gamma + ' ' + beta + ' ' + alpha;
        log.insertBefore(p, log.firstChild);
      }

      document.getElementById('stop').onclick = function() {
        window.removeEventListener('deviceorientation', deviceorientation);
      };
      document.getElementById('play').onclick = function() {
        window.addEventListener('deviceorientation', deviceorientation);
      };
      document.getElementById('calibrate').onclick = function() {
        calibrate = true;
      };

      window.addEventListener('deviceorientation', deviceorientation);

    </script>
  </body>
</html>

开始时 Android 打印 0 0 270 和 iOS 0 0 0。

然后，当我以相同的方式移动两者时，它们不会打印相同的值。

有人可以解释为什么，以及是否有办法标准化数据。

更新#1

我已经尝试了一些校准，并且我关心风景/肖像。要复现，你可以拿上面的代码，把ipad和nexus7竖着放在你面前。校准两者的值（第一个按钮）。然后取数位板的右上角并旋转它，直到数位板达到 90 度。平板电脑应位于左侧。

在 Android 上，gamma 从 0 变为 -80，然后跳转到 270。在 IOS 上，gamma 从 0 变为 -180，没有任何跳转。

4

2 回答 2

5

Full Tilt JS标准化 Android 和 iOS 设备方向实现之间的数据值。它还确保用户旋转屏幕时设备方向数据保持一致。

本文总结了 Full Tilt JS 库中使用的一些技术。

免责声明：我是上述文章和图书馆的作者。请尝试一下，并直接在 Github 项目上报告任何问题。

于 2014-09-16T08:59:16.450 回答
1

如果您需要所有三个应用程序或游戏，您可以提示用户“将设备保持直立”并记录初始值，然后获取这些值的偏移量（增量）。您甚至可以将初始校准保存到 localStorage，这样就不需要重复了。

如果您只需要横向或纵向，只需将 window.innerWidth 与 window.innerHeight 或同样微不足道的东西进行比较。

于 2013-07-02T16:31:05.790 回答