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

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

相关推荐
智能相对论3 小时前
把AI装进OS、批量落地智慧服务,智能手机革命2.0来了
人工智能·智能手机
闲人编程4 小时前
使用Python操作你的手机(Appium入门)
python·智能手机·appium·自动化·codecapsule·处理弹窗
AORO20254 小时前
北斗短报文终端是什么?有什么功能?你能用到吗?
大数据·网络·5g·智能手机·信息与通信
herinspace18 小时前
如何设置电脑分辨率和显示缩放
服务器·数据库·智能手机·电脑
2501_916008891 天前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
那年窗外下的雪.1 天前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
wanhengidc1 天前
云手机和云游戏的不同之处
运维·服务器·安全·游戏·智能手机
wanhengidc2 天前
云手机的安全保护措施有哪些?
运维·服务器·安全·游戏·智能手机·云计算
卓码软件测评2 天前
使用Wireshark测试手机APP网络通信完整指南
网络·功能测试·测试工具·智能手机·wireshark·测试用例·压力测试
AORO20253 天前
防爆手机是什么?2025年防爆手机哪个牌子好?
网络·5g·智能手机·制造·信息与通信