H5设备方向及运动API介绍

H5提供了一些与设备相关的API，其中
有两种事件负责处理设备的物理方向和运动信息，它们常见的信息源有陀螺仪、罗盘及加速计。
第一种是处理方向的事件：deviceorientation，它会在传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息，使针对由于用户移动设备引起旋转和角度变化的行为进行设计。
第二种是处理运动的事件：devicemotion，它会在加速度发生改变时触发。与deviceorientation不同，devicemotion监听的是加速度的变化。传感器通常都具有监听devicemotion的能力，包括笔记本中用于保护移动存储设备的传感器。而能监听deviceorientation事件的传感器更多出现在移动设备中。
先说这俩事件的浏览器支持情况：

设备方向deviceorientation事件和DeviceOrientationEvent对象

可以获取手机静止状态下的方向数据（手机所处的角度、方位和朝向等）。

设备坐标系

设备坐标系由 x、y 和 z 值表示，一般以设备的中心为基准

• x: 处于屏幕平面，正值表示向右。
• y: 处于屏幕平面，正值表示向上。
• z: 与屏幕或键盘垂直，正值表示向上。

返回的数据

数据以欧拉角的形式返回，表示设备坐标系与地球坐标系 之间的差异度数，所以，通过deviceoriention事件获取到的值可以理解为：
- alpha(z): 手机在水平面上旋转的角度，当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】
- beta(x): 围绕x轴上下翻转的角度，当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值，-180 - 180】
- gamma(y): 围绕y轴左右翻转的角度，当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值， -180 - 180】

地球坐标系：
X: 表示东西方向（东为正值）。
Y: 表示南北方向（北为正值）。
Z: 表示上下方向，与地面垂直 （向上为正值）。

尝试

要监听 deviceorientation，首先检查浏览器是否支持这个事件，然后将一个事件handler附加到 window 对象以监听 deviceorientation 事件。

if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', deviceOrientationHandler, false);
    document.getElementById("doeSupported").innerText = "";
}

事件一般返回三个常用的属性：alpha、 beta 和 gamma。
事件handler的一个例子：

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

特别小的一个demo： demo.varpm.com

另外，这是返回的DeviceOrientationEvent对象的全部属性：

其中，如果浏览器可以提供相对某坐标系的值得花，absolute为true。

设备动作devicemo