## 检测设备方向 **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; } } ```