You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Safari中启用DeviceOrientationEvent与DeviceMotionEvent?iOS13权限配置

解决iOS 13+设备姿态/运动事件权限问题

我之前也踩过这个iOS权限的大坑!iOS 13及以后的版本确实强制要求用户主动授权才能访问设备的姿态或运动数据,直接添加事件监听根本不会触发,还会出现你看到的那条权限警告:

[Warning] No device motion or orientation events will be fired until permission has been requested and granted

下面是亲测有效的解决方案,一步步来:

核心要点

iOS要求必须通过用户主动交互(比如点击按钮、触摸屏幕)来触发权限请求,静默请求会被系统直接拦截,这是关键!

完整实现代码

首先在页面里加一个触发权限请求的交互元素(比如按钮):

<button id="requestOrientationPermission">获取设备姿态权限</button>

然后写JavaScript逻辑,在用户点击按钮时请求权限,权限通过后再添加事件监听:

// 获取权限请求按钮
const permissionBtn = document.getElementById('requestOrientationPermission');

// 按钮点击事件处理函数
permissionBtn.addEventListener('click', async () => {
  try {
    // 请求设备方向事件的权限
    const permissionStatus = await DeviceOrientationEvent.requestPermission();
    
    if (permissionStatus === 'granted') {
      // 权限授予成功,添加设备方向事件监听
      window.addEventListener('deviceorientation', (event) => {
        console.log(`${event.alpha} : ${event.beta} : ${event.gamma}`);
      });
      console.log('权限已授予,现在可以正常获取设备姿态数据啦!');
    } else {
      console.log('用户拒绝了权限请求,无法获取设备姿态数据');
    }
  } catch (err) {
    console.error('权限请求过程中出错:', err);
  }
});

如果是要使用DeviceMotionEvent(设备运动事件),只需要把代码里的DeviceOrientationEvent换成DeviceMotionEvent即可,逻辑完全一致。

额外注意事项

  • HTTPS环境要求:iOS上只有HTTPS网站(或者localhost开发环境)才能正常发起权限请求,HTTP环境下权限请求会失败。
  • 权限拒绝后的处理:如果用户第一次拒绝了权限请求,后续再点击按钮不会再弹出授权弹窗,这时候需要引导用户去系统设置的「Safari/你的App」里手动开启权限。
  • 交互触发限制:权限请求必须在用户交互的回调函数内调用,不能在页面加载、定时器等非用户触发的逻辑里执行,否则会直接报错。

内容的提问来源于stack exchange,提问作者Siemen Gijbels

火山引擎 最新活动