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）。

参考

原文链接

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/2185.html