引言

最近在写一个移动端的ar项目，需要调用陀螺仪做一些视角的转动，实践过程中发现会有一些兼容性问题，主要是ios端。

ios13以后，网页端通过js获取陀螺仪参数，需要通过api申请权限。

并且，申请权限只能发生在和网页有交互之后，最好是写在click或者tap事件的回调中。

思路说明

给网页body添加一个click事件，在click事件中申请权限，如果同意了，后续所有监听陀螺仪的事件都可以正确触发。

点击后将绑定的click事件移除。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.body.addEventListener('click', allowOrientation);
async function allowOrientation() {
    let flag;
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        try {
            await DeviceOrientationEvent.requestPermission().then(
                (permissionState) => {
                    flag = permissionState === 'granted';
                }
            );
        } catch (e) {
            flag = false;
        }
    } else {
        flag = true;
    }
    if (!flag) alert('陀螺仪权限获取失败，部分功能无法使用');
    document.body.removeEventListener('click', allowOrientation);
}