HTML5重力感应

DIV+CSS　2014/1/24 13:25:33　　点击：不统计

HTML5重力感应转自：http://www.pjhome.net/article/Javascript/html5_Orientation.html

html5 中针对高端手机提供了重力感应和重力加速的接口，开发可以利用这个接口获取到移动设备重力加速感应数据。

目前已经支持的浏览器只有chrome和firefox，以及IOS的webkit（貌似android上因为版本差异很大，部分低版本的系统不支持）。

通过iphone或者mac电脑访问下面的地址可以体验哈

http://www.pjhome.net/web/Orientation.html

使用也比较简单:

首先，绑定感应事件

JavaScript代码

window.addEventListener('deviceorientation', this.orientationListener, false); //方向感应器

window.addEventListener('MozOrientation', this.orientationListener, false); //方向感应器 for firefox

window.addEventListener('devicemotion', this.orientationListener, false); //重力加速感应器 for iphone, android

使用上需要区分设备是否支持重力加速器，部分设备无重力加速，只能获取到方向

方向中分alpha，beta，gamma三个，其实对应我们常说的 y, z, x 三个方向, 方向可以通过 event 来直接获取到，获取到到的数据单位是度数, 不过firefox稍微有点偏离规范，返回的是弧度单位。