iOS上陀螺仪失效问题

1. 功能

在实现如下功能时，通常会用到基于HTML5陀螺仪的DeviceMotionEvent和DeviceOrientationEvent。

1. 摇一摇
2. 旋转手机看全景图像

DeviceMotionEvent 主要属性：

属性	说明	单位
acceleration	包含x,y,z方向上的加速度	m/s^2
accelerationIncludingGravity	含x,y,z方向上的加速度且带地球重力加速度g的影响	m/s^2
rotationRate	绕三个轴每秒的旋转速度	deg/s

if(window.DeviceMotionEvent){
	window.addEventListener('devicemotion', function(event) {
		console.log(event.acceleration.x + ' m/s2');
	});
}

DeviceOrientationEvent 主要属性：

属性	说明	取值范围	默认值	趋势
alpha	0~360	绕z轴转，屏幕长度方向距y轴的偏移角度	360/0 附近	顺时针至0，逆时针至360
beta	-180 到 0 到180	绕x轴转，屏幕垂直方向距z轴的偏移角度	0附近	顺时针至180，逆时针至-180
gamma	-90 到 0 到 90	绕y轴转，屏幕宽度方向距x轴的偏移角度	0附近	顺时针至90，逆时针至-90

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function(event) {
        // alpha: 在Z轴上的角度
        var rotateDegrees = event.alpha;
        // gamma: 从左到右
        var leftToRight = event.gamma;
        // beta: 从前到后的运动
        var frontToBack = event.beta;
        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
    }, true);
}

2. 问题

这两个事件，在安卓系统上不会有问题, 但是在IOS12.4以上版本都失效

3. 解决方案

iOS12.4以上版本，必须要使用https协议才能正常使用。