## 檢測設備方向 **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; } } ```