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

先说问题:浏览器有一个自带原生的获取手机方向的事件方法 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的事件方法。

相关推荐
何玺1 天前
从“堆料竞赛”到“体验深耕”,X200 Ultra和X200s打响手机价值升维战
数码相机·智能手机
AscendKing1 天前
电脑安装adb并且连接华为手机mate60pro后查看设备
adb·智能手机
东风西巷1 天前
黑阈免激活版:智能管理后台,优化手机性能
智能手机·性能优化·软件需求
非凡ghost2 天前
超级扩音器手机版:随时随地,大声说话
android·人工智能·智能手机·语音识别·软件需求
云天徽上2 天前
【机器学习案列-21】基于 LightGBM 的智能手机用户行为分类
人工智能·机器学习·智能手机·分类·数据挖掘
AORO_BEIDOU2 天前
遨游通讯发布国产化旗舰三防手机AORO AU1:以自主可控重塑工业安全
科技·5g·安全·智能手机·信息与通信
记帖2 天前
STM32H5开发陀螺仪LSM6DSV16X(5)----上报匿名上位机
stm32cubemx·imu·陀螺仪·mems·stm32h503cb·lsm6dsv16x·匿名上位机
CoreMaker-lab2 天前
STM32H5开发陀螺仪LSM6DSV16X(1)----轮询获取陀螺仪数据
陀螺仪·e2studio·瑞萨ra·mems·r7fa4l1bd4cfp·ra4l1·lsm6dsv16x
hgdlip2 天前
手机使用移动网络ip地址是固定的吗?如何查看
网络·tcp/ip·智能手机
AORO_BEIDOU2 天前
北斗短报文终端与5G融合:构建空天地海一体化通信新生态
科技·5g·安全·智能手机·信息与通信