检测设备方向

越来越多支持web功能的设备拥有检测自身方向的能力了；也就是说，这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。特别地，通过这些数据，像手机等一些手持设备可以实现自动调整旋转角度来保持显示直立，以及当设备旋转到宽屏时（宽度大于高度），自动提供宽屏的网页效果。

有两种Javascript事件负责处理设备方向信息。第一种是DeviceOrientationEvent，它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息，使针对由于用户移动设备引起旋转和仰角变化的行为设计交互响应成为可能。

第二种是DeviceMotionEvent，它会在加速度发生改变时触发。跟DeviceOrientationEvent不同，DeviceMotionEvent监听的是加速度的变化而不是方向。传感器通常都具有监听DeviceMotionEvent的能力，包括笔记本中用于保护移动存储设备的传感器。而能监听DeviceOrientationEvent事件的传感器更多出现在移动设备中。

处理方向（orientation）事件

要接收设备方向变化信息，你只需要注册监听deviceorientation事件：

window.addEventListener("deviceorientation", handleOrientation, true);

注册完事件监听处理函数后（对应这个例子中的handleOrientation），监听函数会定期地接收到最新的设备方向数据。

方向事件对象中包含四个值：

DeviceOrientationEvent.absolute

DeviceOrientationEvent.alpha

DeviceOrientationEvent.beta

DeviceOrientationEvent.gamma

下面是一个事件处理函数的例子：

function handleOrientation(orientData) {
  var absolute = orientData.absolute;
  var alpha = orientData.alpha;
  var beta = orientData.beta;
  var gamma = orientData.gamma;

  // Do stuff with the new orientation data
}

相关值解释

关于每一个轴的记录值表示的是相对于标准的坐标系，设备在某一个给定轴上的旋转量。Orientation and motion data explained 这篇文章有更详细的描述，下面是对这篇文章的总结。

• DeviceOrientationEvent.alpha 表示设备沿z轴上的旋转角度，范围为0~360。
• DeviceOrientationEvent.beta 表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。
• DeviceOrientationEvent.gamma 表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。

例子

这个例子会成功运行在支持检测自己方向的设备中的支持deviceorientation 事件的浏览器中。

想象一下花园（garden）中的一个球（ball）：

<div class="garden">
  <div class="ball"></div>
</div>

<pre class="output"></pre>

花园只有200px宽（很小对吧），球在中央：

.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 + "\n";
  output.innerHTML += "gamma: " + y + "\n";

  // 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);

输出结果:

处理移动（motion）事件

移动事件的处理跟方向事件是一样的，除了他们有自己的事件名：devicemotion

window.addEventListener("devicemotion", handleMotion, true);

真正不同的是做为参数传递给HandleMotion函数的DeviceMotionEvent对象所包含的信息。

这个对象包含四个属性：

• DeviceMotionEvent.acceleration
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

相关值解释

DeviceMotionEvent对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。（Orientation and motion data explained有更详细的说明。）

acceleration 和 accelerationIncludingGravity，都包含下面三个轴:

• x: 西向东
• y: 南向北
• z: 垂直地面

rotationRate, the situation is a bit different; the information corresponds to the following in each case:

rotationRate的情况有点不同：

• alpha: 设备沿着垂直屏幕的轴的旋转速率 (桌面设备相对于键盘)
• beta: 设备沿着屏幕左至右方向的轴的旋转速率(桌面设备相对于键盘)
• gamma: 设备沿着屏幕下至上方向的轴的旋转速率(桌面设备相对于键盘)

最后，interval 表示的是从设备获取数据的频率，单位是毫秒。

Specifications

Browser compatibility

Gecko implementation notes

1. Firefox 3.6, 4, and 5 supported mozOrientation versus the standard DeviceOrientationEvent event

See also

• DeviceOrientationEvent
• DeviceMotionEvent
• The legacy MozOrientation event.
• Orientation and motion data explained
• Using deviceorientation in 3D Transforms