deviceOrientation简介

1. 写在前面

是否记得盗梦空间，是否记得那个一直在转的陀螺仪？这里，我们将要说的是deviceOrientation，手机中的陀螺仪，是否还记得去年，天猫“穿越宇宙的邀请函”，其中就用到了陀螺仪的概念，在这里，我们就先来看看，这个炫炫的东西，到底是个什么吧。

2. deviceOrientation兼容性

作为前端的我们，如果在想要使用一个属性之前，都会先问一句，兼容性怎么样？适合哪些浏览器使用，不兼容的会怎么样？

那就来看看兼容性吧：

或者可以去这里，看一下最新的兼容性：deviceOrientation。

从上图可以看出来，deviceOrientation的兼容性已经是很不错的了，图中的兼容性，是有些错误的，在上图中，显示在Safari中，不支持，但是真实的情况是，在IOS的Safari中，支持性是很好的，并且做的一些东西的流畅性，也比Android的好很多，所以如果要使用该属性的话，可以放心的使用了。

并且，你也不用担心那些不支持的设备，因为这个属性如果不支持的话，其实是完全支持向后兼容的，不会报错了，也不会执行任何其他的非预期的操作，因为这个是一个事件…只要浏览器不会触发这个事件，就这些方法，就没有任何的影响。

这个时候，陀螺仪就不会有任何动作，而变成了一个静止的静态页了，而如果对于支持的那些，则可以有更好的体验了。

所以，如果有需求是需要使用到陀螺仪的，那么就放心的使用吧。

3. deviceOrientation使用

deviceOrientation的使用方法很简单，可以直接绑定事件就可以了，比如：

function _cb(event){
    console.log(event);
}

window.addEventListener('deviceorientation', _cb);

前面也说了，这是一个事件类型，那么对于使用者的我们来说，事件的回调数据，才是我们最关注的，也就是在回调函数中，event对象，到底可以提供给我们哪些数据可用，这些数据代表的含义又是什么？

除去正常的event事件都包含的一些属性之外，这里还包含了以下几个数据，也是我们最关心的几个数据：

absolute:false
alpha:null
beta:null
gamma:null

按理说，我们接下来就要看看，上面的几个属性，分别代表的含义，事实上，我们在接下来却是要对这几个属性进行说明，但是在了解个属性之前，先来看一个更重要的概念，那就是坐标系，不管什么东西，都要有个参考，才能更好的理解，不然就要得雪盲症了呢。

那么陀螺仪的坐标系是怎么样的呢？来看下图（图片取自网络，如有问题，请联系作者）：

把手机放在水平的桌面上（屏幕朝上），坐标系就如图中所示，x轴指向手机的右侧，y轴指向手机的头部，z轴垂直于整个手机。

该坐标系是相对于手机的，不是相对我们所在的空间的，如果手机的在空间的位置改变了（水平放改为了竖直放），这个时候，手机的这个x,y,z的坐标系会跟着手机的位置，进行变动的，只是这样单纯的说，是很难理解到的，那么接下来，我们就来根据单个属性，配合着示例，来看看吧。

第一次实战演练：axes坐标系数据测试。

可以直接扫描二维码：

3.1：alpha属性

该属性的获取方法：event.alpha属性，表示在沿着Z轴的旋转。

先来理解一下，沿着Z轴旋转是怎么样的，看下图（图片取自网络，如有问题，请联系作者）：

如图所示，把手机水平放置在桌面上，在水平方向上，就让手机躺在桌面上，把手机进行旋转，就是按照z轴旋转。

W3C中指出，该属性的取值是[0, 360)的，即旋转一周是360度的。那哪个方向是0度和360度的交互点呢？

W3C中规定，把手机水平的放在桌面上，手机的头部指向西方，这个时候，陀螺仪的数据是如下的数据：

{
    alpha: 90,
    beta: 0,
    gamma: 0
}

但是我自己试了一下，这个是受限于手机浏览器的，我自己使用的iPhone 5S中，我测试使用了三个浏览器得到的结果，都不是太统一，都是有一定的误差的。

水平向西时，各浏览器的数据：

Safari：230左右（不知道什么鬼）

UC浏览器：180左右

QQ浏览器：360/0左右，微信内部也是这个，所以微信内部是使用IOS的QQ浏览器的…

为什么只有这几个浏览器呢？因为手机还是IOS8的系统，手机端的Chrome和FF，都嫌弃我系统版本低，不让我安装了。

如果您已经打开了前面的那个示例，就把手机放在水平的桌面上，试试吧。

然后再把手机立起来，试试？依然按照旋转Z轴的方式，然后换其他的角度，再试试，你对这个属性的了解就会更深了。

3.2：beta属性

该属性的获取方法：event.beta属性，表示在沿着X轴的旋转，它的取值范围是[-180, 180)。

先来理解一下，沿着X轴旋转是怎么样的，看下图（图片取自网络，如有问题，请联系作者）：

所以，关于这个属性，我们可以这么理解，把手机水平放置，屏幕朝上，这个时候，beta的取值，理论上0的（不能完全水平，所以有些误差），在现在把手机的头部抬高，然后慢慢的立起来，这个时候，beta的值是会从0一直变到90的，而如果让手机的底部，慢慢抬高，然后慢慢的倒立起来，这个时候beta的值是从0变化到-90的。

关于上面说的点，是我自己使用手机测试出来的，与W3C中的数据，是不同的。

注：W3C中，规定该值的取值是[-180,180)，而我自己使用IOS8的Iphone5S测试的数据则是[-90,90)。这个数据是有问题的，这里暂且认为是IOS系统的这个数据，不准吧，毕竟这里没有Chrome做对比测试，所以，仅做参考。

虽然这里的取值范围是有不同的，但是在W3C中，规定，手机立起来时，beta的值是90，这个是没有问题的。

请扫前文中的二维码，来做这个测试。

3.2：gamma属性

该属性的获取方法：event.gamma属性，表示在沿着Y轴的旋转，它的取值范围是[-90, 90)。

先来理解一下，沿着Y轴旋转是怎么样的，看下图（图片取自网络，如有问题，请联系作者）：

所以，关于这个属性，我们可以这么理解，把手机水平放置，屏幕朝上，这个时候，gamma的取值，理论上0的（不能完全水平，所以有些误差），现在把手机的左侧抬高，然后慢慢的完全反转180度，这个时候，gamma的值是会从0一直变到180的，而如果让手机的右侧，慢慢抬高，然后慢慢的完全反转180度，这个时候gamma的值是从0变化到-180的。

依然，这里的测试是个人手机测试，与W3C中的数据，是不同的。

注：W3C中，规定gamma的取值是[-90,90)，而我自己使用IOS8的Iphone5S测试的数据则是[-180,180)。

注：这个很关键，关于gamma的取值，在屏幕水平朝上时，gamma的取值是0，但是在屏幕朝下的时候，gamma的取值是180的临界点，随便变动都会出现，突然从-170多变到170多的情况，这个时候的数据跳动是特别大的，所以这里是需要特别注意一下的。

3.4：疑惑

我现在想要表达的是一个疑惑，这个疑惑起源于我自己的测试：

为什么这里的beta和gamma，不进行统一一下呢，既然都是手机按照不同的方向进行翻转来得到的数据，都统一到[-90,90)不是很好的吗，这样就不会导致gamma在屏幕水平向下时，会出现，180与-180这两个变动特别大的临界点的出现了。

当然，如果在正常使用时，真实的数据情况，可能是比这个更复杂的。

4：个人想法

文中的数据，一部分是参考W3C中的规定，另外一部分是直接测试所得，因为测试的设备有限，所以不确定现在到底有多少手机类型是完全按照W3C中的规定来处理的，也可能最近生产的手机，已经是按照最新的W3C标准来的了，毕竟W3C的规范，最新的一次更新是在20160818，去W3C看看。

所以本篇的仅做参考，如果通过本篇文章，能让您对各属性的角度有一个自己的认识，那么就是本篇文章的最大收获了。

在写本篇文章之前，是想写一个优化陀螺仪数据的方法，但是到这里之后，却发现无法写下去了，毕竟与如果各设备的获取数据差异过大，那么这个方法，基本就是无效的。

所以本篇就到此为止了，虽然没有能写一个通用的规范性的方法，但是通过本篇，我也更清楚了陀螺仪各数据的获取方式，也算是一个额外的收获吧。

所以虽然本盘文章有些内容不全，也依然发布一下吧，希望对您也能有所帮助。

5：结尾

在本篇文章的开头中，有引入caniuse的支持性的一张图，之前还说是，支持性很好的，现在看来，IOS下，确实没有按照W3C的标砖支持，IOS下的数据，虽然也支持了该功能，但是其数据获取与W3C的规定，是有差距的，所以在真实的项目中使用，还是要注意这一点的。

在陀螺仪的使用方面，有一个当前已经很普及的库了，如果想要使用的话，可以参考：parallax，它给提供的一个DEMO。

本篇内容偏少，但到此为止。

如果您发现文中有描述错误或者不当的地方，请留言指出，不胜感激，谢谢！