设备移动和屏幕方向事件可让您访问移动设备中的内置加速度计、陀螺仪和罗盘。
这些事件可用于多种用途；例如，在游戏中，可用于控制角色的方向或动作。与地理定位结合使用时，它们有助于创建更准确的精细导航，或提供有关特定位置的信息。
摘要
- 检测设备的哪一侧朝上以及设备的旋转方式。
- 了解何时以及如何响应动作和方向事件。
哪一端朝上？
如需使用设备屏幕方向和动作事件返回的数据，请务必了解所提供的值。
地球坐标系
地球坐标系由值 X、Y 和 Z 描述，根据重力和标准磁方向进行对齐。
| 坐标系 | |
|---|---|
X |
表示东西方向（东为正）。 |
Y |
表示南北方向（北为正）。 |
Z |
表示上下方向，垂直于地面（向上为正）。 |
设备坐标系
设备坐标系由值 x、y 和 z 描述，并基于设备中心进行对齐。
| 坐标系 | |
|---|---|
X |
在屏幕平面中，向右为正。 |
Y |
在屏幕平面中，正值表示向上。 |
Z |
垂直于屏幕或键盘，正值表示远离。 |
在手机或平板电脑上，设备屏幕方向基于屏幕的典型方向。对于手机和平板电脑，它基于处于竖屏模式的设备。对于台式机或笔记本电脑，方向是相对于键盘而言的。
轮替数据
旋转数据以欧拉角的形式返回，表示设备坐标系与地球坐标系之间的度数差。
Alpha 版
围绕 z 轴的旋转。当设备顶部正对北方时，alpha 值为 0°。当设备逆时针旋转时，alpha 值会增加。
Beta 版
围绕 X 轴旋转。当设备的顶部和底部与地球表面的距离相等时，beta 值为 0°。当设备顶部向地面倾斜时，该值会增加。
Gamma
围绕 y 轴的旋转。当设备的左右边缘与地球表面的距离相等时，gamma 值为 0°。当右侧向地球表面倾斜时，该值会增加。
设备方向
设备屏幕方向事件会返回旋转数据，其中包括设备前后倾斜和左右倾斜的程度，如果手机或笔记本电脑有指南针，还会返回设备朝向。
请谨慎使用该类别。
测试支持情况。
不要在每次发生屏幕方向事件时都更新界面，而是应与 requestAnimationFrame 同步。
何时使用设备屏幕方向事件
设备屏幕方向事件有多种用途。示例如下：
- 在用户移动时更新地图。
- 细微的界面调整，例如添加视差效果。
- 与地理定位结合使用，可用于精细导航。
检查支持情况并监听事件
如需监听 DeviceOrientationEvent，请先检查浏览器是否支持这些事件。然后，将事件监听器附加到监听 deviceorientation 事件的 window 对象。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
处理设备屏幕方向事件
当设备移动或改变方向时，系统会触发设备方向事件。它会返回设备当前位置与地球坐标系之间的差异数据。
该事件通常会返回三个属性：alpha、beta 和 gamma。在移动版 Safari 上，系统会返回一个额外的参数 webkitCompassHeading 以及罗盘航向。
设备移动
设备屏幕方向事件会返回旋转数据，其中包括设备前后倾斜和左右倾斜的程度，如果手机或笔记本电脑有指南针，还会返回设备朝向。
当需要设备的当前运动状态时，请使用设备运动。
rotationRate 以度/秒为单位。acceleration 和 accelerationWithGravity 以米/秒2为单位。请注意不同浏览器实现之间的差异。
何时使用设备移动事件
设备移动事件有多种用途。示例如下：
- 摇晃手势可刷新数据。
- 在游戏中，让角色跳跃或移动。
- 适用于健康与健身应用。
检查支持情况并监听事件
如需监听 DeviceMotionEvent，请先检查浏览器是否支持这些事件。然后，将事件监听器附加到监听 devicemotion 事件的 window 对象。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
处理设备动作事件
设备移动事件会定期触发，并返回设备在相应时刻的旋转（以 °/秒为单位）和加速度（以 m/s2 为单位）数据。某些设备没有可排除重力影响的硬件。
该事件会返回四个属性：accelerationIncludingGravity、acceleration（不包括重力的影响）、rotationRate 和 interval。
例如，我们来看一下平放在桌子上且屏幕朝上的手机。
| 州 | 旋转 | 加速度 (m/s2) | 含重力的加速度 (m/s2) |
|---|---|---|---|
| 未检测到移动 | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| 向上移动，朝向天空 | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| 仅向右移动 | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| 向上和向右移动 | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
相反，如果手机屏幕与地面垂直，并且观看者可以直接看到屏幕：
| 州 | 旋转 | 加速度 (m/s2) | 含重力的加速度 (m/s2) |
|---|---|---|---|
| 未检测到移动 | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| 向上移动，朝向天空 | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| 仅向右移动 | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| 向上和向右移动 | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
示例：计算物体的最大加速度
设备运动事件的一种用途是计算物体的最大加速度。例如，一个人跳跃时的最大加速度是多少？
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
点按“Go!”按钮后，系统会提示用户跳跃。在此期间，页面会存储最大（和最小）加速度值，并在跳跃后告知用户其最大加速度。