IOS 重力感应失效

原因

1. 重力感应需要使用 https 协议，http下不工作
2. ios13+系统后，苹果手机提高用户隐私安全性，导致重力感应需要用户主动触发才可以使用
3. 苹果授权时候，会弹出comfirm弹窗，确认是否授权重力感应，暂时有三个返回值。
4. 如果在http下，授权只会返回denied，所以确认在https下
5. 这里需要注意，如果用户取消了授权，将在短时间内无法再次授权使用，因此可以在授权前进行提示，提高用户体验性
6. 目前确认主动触发的事件可以是click，touch等

授权代码

 window.DeviceOrientationEvent.requestPermission().then((state) => {
            switch (state) {
              case "granted":
                // you can do something
                break;
              case "denied":
                alert("你拒绝了使用陀螺仪");
                break;
              case "prompt":
                alert("其他行为");
                break;
            }
          });

授权优化

DeviceMotionEvent.requestPermission().then(function (state) {
    if ('granted' === state) {
       window.addEventListener('devicemotion', function () {
           // you can do something
       }, false);
    } else {
        alert('apply permission state: ' + state);
    }
}).catch(function(err){
    alert('error: ' + err);
});

判断是否是ios

function isIos() {
        var u = navigator.userAgent;
        if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
          return true;
        }
        return false;
      }

应用 --> 用户刚进页面获取权限

let testDome = document.querySelector(".test");
testDome.addEventListener("click", clickEvent);
window.onload = function () {
  testDome.click();
};

 function clickEvent() {
        //   获取苹果权限
        if (isIos()) {
          // 苹果手机
          //IOS13+ 授权流程
          window.DeviceOrientationEvent.requestPermission().then((state) => {
            switch (state) {
              case "granted":
                // you can do something
                break;
              case "denied":
                alert("你拒绝了使用陀螺仪");
                break;
              case "prompt":
                alert("其他行为");
                break;
            }
          });
        }
        testDome.removeEventListener("click", clickEvent);
      }