ios手机不兼容摇一摇功能

过年后回来的时候做了一个摇一摇的H5小游戏。因为我使用的是安卓手机，一直没有发现在苹果手机上不能使用。
刚开是以为是http和https的问题，但是在ios上即使使用https开头的链接然后还是不能摇~

后来网上找了原因说是ios13+的版本，浏览器对设备运动和方向事件的访问权限处于关闭状态，但是可以请求这种权限，类似于请求相机权限吧。

因此，在IOS13+的移动端中，需要在DeviceMotionEvent上调用requestPermission这个方法，该方法请求用户当前来源的权限以显示通知，然后根据用户的不同选择，触发不同的状态【granted（被授予），denied（被拒绝） 或者default（默认）】，并返回一个Promise对象。

 代码如下:

  var ua = navigator.userAgent.toLowerCase();
 if (ua.indexOf("like mac os x") > 0) {
     var reg = /os [\d._]*/gi;
     var verinfo = ua.match(reg);
     var version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
     var arr = version.split(".");
     if (arr[0] > 13) {  //对13以后的版本处理,
         DeviceMotionEvent.requestPermission().then(permissionState => {
             if (permissionState === "granted") {
                 alert("你授权了，可以进行摇一摇啦");
             }
             if (permissionState === "denied") {
                 alert("你拒绝了");
             }
         }).catch((err) => {
             //======获取权限需要点击事件才能触发===//
             Modal.warning({
                 title: '获取授权',
                 content: '请允许授权，否则将无法进行摇一摇',
                 onOk() {
                     reqShakePermission();
                 },
             });
         });
     } else {  //13以前的版本
         alert("你的手机支持摇一摇")
     }
 } else {
     
 }
     
function reqShakePermission() {
    if (typeof DeviceMotionEvent.requestPermission === "function") {
        DeviceMotionEvent.requestPermission().then((permissionState) => {
            if (permissionState === "granted") {
                var speed = 15;    // 用来判定的加速度阈值，太大了则很难触发
                var x, y, z, lastX, lastY, lastZ;
                x = y = z = lastX = lastY = lastZ = 0;
                window.addEventListener("devicemotion", function (event) {
                    var acceleration = event.accelerationIncludingGravity;
                    x = acceleration.x;
                    y = acceleration.y;
                    if (self.state.clickStatus) {
                        if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
                            // 用户设备摇动了，触发响应操作
                            // 此处的判断依据是用户设备的加速度大于我们设置的阈值
                                alert("摇动了手机");
                        }
                    } else {//如果已经生成了结果就不需要再重新生成了

                    }
                    lastX = x;
                    lastY = y;
                }, false);
            } else if (permissionState == "denied") {
                alert("拒绝喽");
            }
        }).catch((error) => {
            // console.log(error);
        });
    } else {
        // 处理常规的非iOS 13+设备
        // console.log("处理常规的非iOS 13+设备");
        if (window.DeviceMotionEvent) {
            alert("可以进行摇一摇");
        } else {
            // console.log('不支持window.DeviceMotionEvent');
        }
    }
}

效果图：

PS：点击允许即可使用摇一摇功能。如果拒绝，需要在关掉这个进程再次进入页面才会再次询问。否则一直用不了摇一摇功能哦~