H5 陀螺仪(DeviceOrientationEvent)
h5陀螺仪,ios需要特殊处理,ios13以上调用陀螺仪需要申请权限(需要用户手动授权,不能默认授权,并且ios真机测试时需要h使用https)
话不多说 直接上代码
- Alpha:以Z轴为轴的旋转为alpha。其范围为0到360度,当前指向表示为z。
- Beta:以X轴为轴的旋转为beta。其范围为-180到180度,当前指向表示为x。
- Gamma:以Y轴为轴的旋转为gamma。其范围为-90到90度,当前指向表示为y。
🤫 嘘~偷的图
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//判断是ios还是安卓
if(isiOS){
if(window.DeviceOrientationEvent.requestPermission){
window.DeviceOrientationEvent.requestPermission().then(state => {
if(state === "granted"){//允许
console.log("用户允许",state)
monitor();
}else if(state === "denied"){//拒绝
alert('您已拒绝倾斜手机,请退出微信重新进入授权~');
console.log("用户拒绝",state)
}else if(state === "prompt"){
console.log("用户干了啥",state);
alert('遇到未知错误,请退出微信重新进入~')
}
})
}else{
monitor();
}
}else if(isAndroid){
monitor();
}
// 陀螺仪旋转后事件处理
function monitor() {
if(window.DeviceMotionEvent){
window.addEventListener("deviceorientation", function(e) {
console.log(e.alpha,e.beta,e.gamma);
// 做你想做的操作
}
}else{
alert('您的手机不支持陀螺仪哦~')
}
}