HTML5 中 Device Orientation 的特性 | 珊瑚贝

HTML5 中包含一个帮助检测 device orientation 的特性，使用这个特性可以在移动设备浏览器中判断用户设备的旋转重力方向。

基本知识

Alpha, Beta, Gamma 角度旋转。 当用户旋转手机的时候，HTML5 中定义了三个轴方向的旋转，如下： 上图可以看考，分别是 z，x，y 轴，对应分别是：Alpha，Beta，Gamma，下面图将更清楚的展示： 上图是 Alpha 旋转，　围绕 Z 轴旋转（绿线旋转方向，水平） 上图是 Beta 旋转，　围绕 X 轴旋转（绿线旋转方向，前后） 上图是 Beta 旋转，　围绕 Y 轴旋转（绿线旋转方向，左右）

属性

• alpha: (float 类型) 以 z 方向为轴心的旋转角度 浮点数类型，只读属性，取值范围为 0 到 360（不等于 360）。
• beta: (float 类型) 以 x 方向为轴心的旋转角度 浮点数类型，只读属性，取值范围为 – 180 到 180（不等于 180）。
• gamma: (float 类型) 以 y 方向为轴心的旋转角度 浮点数类型，只读属性，取值范围为 – 180 到 180（不等于 180）。

参考

原文链接