投稿    登录
欢迎来访~

HTML5中Device Orientation的特性

HTML 崔庆才 12207浏览 1评论

扫码或搜索:进击的Coder

发送

即可立即永久解锁本站全部文章

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的特性

更多文章、联系博主、技术交流、商务合作

扫码或搜索:进击的Coder

进击的Coder

微信公众号 扫一扫关注

喜欢 (4)or分享 (0)

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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 很详细
    http://www.cj318.cn2019-04-13 09:42 回复