检测设备方向

7、手机设备方向

7.1 方向

Orientation API用于检测手机的摆放方向（竖放或横放）。

（1）检测浏览器是否支持

if(window.DeviceOrientationEvent){
  //支持
}else{
  //不支持
}

（2）监听方向变化
一旦设备的方向发生变化，会触发deviceorientation事件，可以对该事件指定回调函数。

window.addEventListener("deviceorientation", listener,false);

function listener(event){
  var alpha = event.alpha;
  var beta = event.beta;
  var gamma = event.gamma;
}

上面代码中，event事件对象有alpha、beta和gamma三个属性，它们分别对应手机摆放的三维倾角变化。要理解它们，就要理解手机的方向模型。当手机水平摆放时，使用三个轴标示它的空间位置：x轴代表横轴、y轴代表竖轴、z轴代表垂直轴。event对象的三个属性就对应这三根轴的旋转角度。

• alpha：表示围绕z轴的旋转，0~360(度)。当设备水平摆放时，顶部指向地球的北极，alpha此时为0。
• beta：表示围绕x轴的旋转，-180~180(度)，由前向后。当设备水平摆放时，beta此时为0。
• gramma：表示围绕y轴的选择，-90~90(度)，从左到右。当设备水平摆放时，gramma此时为0。

7.2 移动（motion）

（1）检测是否支持

if(window.DeviceMotionEvent){
  //支持
}else{
  //不支持
}

（2）和方向事件一样，移动也有监听事件：devicemotion

window.addEventListener("devicemotion",listener,true)

function listener(event){
  var acceleration = event.acceleration;
  var accelerationIncludingGravity = event.accelerationIncludingGravity;
  var rotationRate = event.rotationRate;
  var interval = event.interval;
}

上面代码中，event事件对象有acceleration、accelerationIncludingGravity、rotationRate和interval四个属性。

属性说明：
（1）acceleration、accelerationIncludingGravity

acceleration和accelerationIncludingGravity属性都包含三个轴：
x轴：西向东（acceleration.x）
y轴：南向北（acceleration.y）
z轴：垂直地面（acceleration.z）

（2）rotationRate

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

（3）interval

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

更多：检测设备方向

简单的摇一摇功能：

var SHAKE_THRESHOLD = 3000;   
var last_update = 0;   
var x = y = z = last_x = last_y = last_z = 0;

if (window.DeviceMotionEvent) {   
  window.addEventListener("devicemotion", deviceMotionHandler, false);   
}
 
function deviceMotionHandler(eventData) {   
  var acceleration = eventData.accelerationIncludingGravity;   
  var curTime = new Date().getTime();   
  var diffTime = curTime - last_update;   
  if (diffTime > 100) {   
    last_update = curTime;   
    x = acceleration.x;   
    y = acceleration.y;   
    z = acceleration.z;   
    var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;   
   if (speed > SHAKE_THRESHOLD) {
     //dosomething
   };    
   last_x = x;   
   last_y = y;   
   last_z = z;   
 }   
}