投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

HTML5中Device Orientation的特性

HTML 崔庆才 1989浏览 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)

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

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 99350970 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 627725766 立即加入

想找人聊天解闷?想要学习干货?

微信公众号进击的Coder为你打造

进击的Coder

微信公众号 扫一扫关注