0%

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

参考

原文链接