投稿    登录
  您好,欢迎光临崔庆才的博客,祝大家新年快乐,鸡年大吉!

HTML5中Device Orientation的特性

HTML 崔庆才 1798浏览 1评论

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

参考

原文链接

转载请注明:静觅 » HTML5中Device Orientation的特性

喜欢 (1)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的