javascriptは携帯機器の重力方向を検出します.

二つのjavascriptイベントは設備の方向情報を処理します.

DeviceOrientationEventは、加速度センサがデバイスの方向変化を検出したときにトリガされる.このイベントによってもたらされるデータ情報を処理することにより、ユーザのモバイルデバイスによる回転と仰角変化に対する挙動に対するインタラクティブ応答を設計することが可能となる.

DeviceMotionEventは、加速度が変化したときにトリガされます.DeviceOrientationEventと違って、DeviceMotionEventが傍受しているのは方向ではなく加速度の変化です.センサは、通常、モバイル記憶装置を保護するためのノートパソコンのセンサを含む、傍受DeviceMotionEventの能力を有する.一方、DeviceOrientationEventイベントを傍受することができるセンサは、モバイルデバイスにおいて

より多く現れる.
イベントの処理方向
デバイスの方向変化情報を受信するには、deviceorentationイベントを監視するだけでいいです.
相関値解釈
各軸の記録値は、標準の座標系に対して、ある所定の軸におけるデバイスの回転量を表しています.Orientation and motion data explinedこの文章はより詳しい説明があります.以下はこの文章のまとめです.

DeviceOrientationEvent.alphaは、z軸に沿った装置の回転角度を表し、範囲は0〜360です.

DeviceOrientationEvent.betaは、x軸における機器の回転角度を表し、範囲は−180〜180である.デバイスが前から後ろに回転する場合を説明します.

DeviceOrientationEvent.gammaは、y軸における装置の回転角度を表し、範囲は−90〜90である.デバイスが左から右に回転する場合を説明します.例

この例は、自分の方向を検出する機器に対応するdeviceorentationイベントをサポートするブラウザで実行することに成功します.
ガーデンのボールをイメージしてください.

  



ガーデンは幅が200 pxしかないです.ボールは中央にあります.
.garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}
今、私たちが設備を動かすと、ボールが移動します.
var ball   = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');

var maxX = garden.clientWidth  - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  var x = event.beta;  // In degree in the range [-180,180]
  var y = event.gamma; // In degree in the range [-90,90]

  output.innerHTML  = "beta : " + x + "
";
  output.innerHTML += "gamma: " + y + "
";

  // Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
  if (x >  90) { x =  90};
  if (x < -90) { x = -90};

  // To make computation easier we shift the range of 
  // x and y to [0,180]
  x += 90;
  y += 90;

  // 10 is half the size of the ball
  // It center the positioning point to the center of the ball
  ball.style.top  = (maxX*x/180 - 10) + "px";
  ball.style.left = (maxY*y/180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);