关于在浏览器里面获取手机方向的事件

先说问题:浏览器有一个自带原生的获取手机方向的事件方法 deviceorientation : https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent/DeviceOrientationEvent

这个事件里面有个实例absolute 看名字知道意思吧,对就是绝对坐标的意思,如果带了absolute就是用地球绝对坐标,如果不带absolute那么就用的你自己手机设备的相对坐标来参照返回给你当前的aplha,beta,gamma数据;最开始捣鼓了很久发现不同的手机那个位置怎么都不对,直接心态崩了,然后无意中发现的居然还有个带absolute的事件,联想到他的实例熟悉就试了一下,然后就发现了这个大坑。

所以正确的打开方式是使用 deviceorientationabsolute 事件

好了,下面上代码

复制代码
function monitor() {
  //window.DeviceMotionEvent 需使用https 才能拿到这个对象  或者低版本的android机器可以使用http拿到这个陀螺仪设备
  if (process.env.IS_DEV || window.DeviceMotionEvent) {
    //陀螺仪这里使用absolute方法来监听方向  如果不带absolute的事件那么用的是相对于手机自带的坐标系 来返回的参数
    //如果用来absolute的事件那么返回的是相对于地球坐标系的数据
    window.addEventListener(
      'deviceorientationabsolute',
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      throttle(function (e) {
        // console.log(e.alpha, e.beta, e.gamma);
        // 处理你要处理的事情
        throttlePosition(e);
      }, 300),
      false,
    );
  } else {
    alert('您的手机不支持陀螺仪哦~');
  }
}
复制代码
monitor();

重要的坑说三遍,由于不同的手机可能不一样。一定要用带absolute的事件方法,一定要用带absolute的事件方法,一定要用带absolute的事件方法。

相关推荐
wanhengidc4 小时前
云手机 手游专用虚拟手机
运维·服务器·安全·游戏·智能手机
资讯全球17 小时前
运动耳机哪个好?2025年运动耳机最新测评,园世Beta Pro推荐吗?
智能手机
Digitally2 天前
从iPhone转移到itel手机的联系人转移指南
ios·智能手机·iphone
vxtkjzxt8882 天前
手机群控软件如何优化游戏运营的运营策略
游戏·智能手机
AORO20252 天前
适合户外探险、物流、应急、工业,五款三防智能手机深度解析
网络·人工智能·5g·智能手机·制造·信息与通信
vxtkjzxt8882 天前
手机群控软件在游戏运营中的风险管控技术实现
游戏·智能手机
wanhengidc2 天前
移动端云手机的优势都有哪些?
运维·服务器·游戏·智能手机·云计算
wanhengidc3 天前
大型手游可以在云手机中流畅运行吗
网络·游戏·智能手机·架构·云计算
串流游戏小天才3 天前
战地6正式上线发售!手机平板怎么玩战地6
智能手机·电脑
xiaocao_10233 天前
找一款手机上使用比较简约的备忘录工具
智能手机·备忘录·手机备忘录