移动端重力感应

1、orientationchange事件
重力感应器，当手机横着放或者竖着放就会触发，其中window.orientation值可以为 0 (竖屏)、90/-90(横屏)，，（在测试时，该事件在内置浏览器好像不能触发，在QQ浏览器等会触发）

/* orientationchange */
window.addEventListener('orientationchange', (e) => {
  alert('旋转了')
  this.orientation = window.orientation
})

2、DeviceMotionEvent事件

表示设备运动事件，当设备的加速度改变时触发，

e.acceleration，加速装置，不考虑重力加速度9.8的影响，又分为x、y、z三个方向，分别表示三个方向的加速度。（x: 西向东 y: 南向北 z: 垂直地面）

e.accelerationIncludingGravity，同e.acceleration，考虑了重力加速度。

e.rotationRate，表示三个轴的旋转率

a)	alpha: 设备沿着垂直屏幕的轴的旋转速率 (桌面设备相对于键盘)。
b)	beta: 设备沿着屏幕左至右方向的轴的旋转速率(桌面设备相对于键盘)。
c)	gamma: 设备沿着屏幕下至上方向的轴的旋转速率(桌面设备相对于键盘)

　　

/* DeviceMotionEvent */
if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', (e) => {
    this.acceleration = e.acceleration
    this.rotationRate = e.rotationRate
    this.accelerationIncludingGravity = e.accelerationIncludingGravity
  })
} else {
  alert('你的设备不支持DeviceMotionEvent')
}

3、DeviceOrientationEvent对象
表示设备的方向变化信息，

a)	e.absolute	如果方向数据跟地球坐标系和设备坐标系有差异，则absolute为true，如果方向数据由设备本身的坐标系提供，则absolute为false。
b)	e.alpha		表示设备沿z轴上的旋转角度，范围为0~360。
c)	e.beta		表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。
d)	e.gamma  	表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况

　　

/* DeviceOrientationEvent */
if( window.DeviceOrientationEvent ){
  window.addEventListener('deviceorientation', (e) => {
    this.alpha = e.alpha
    this.beta = e.beta
    this.gamma = e.gamma
  })
} else {
  alert('你的设备不支持deviceorientatiinevent')
}