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協議才能正常使用。