移动端关于手机摇一摇(IOS13+一些问题)

一说到移动端H5的摇一摇,经过查阅资料很容易就找到shake.js这个封装好的api,具体的使用方法参考这个网址:

https://www.npmjs.com/package/shake.js

但是有些开发者会发现自己按照文档编写,拼命晃动手机还是没有触发晃动的事件,有可能的原因有二:

1.项目的地址不是以https开头的,改为https开头即可;

2.若改为https之后还是没有效果,那么要看一下你的移动端系统是否为IOS13+

之前在IOS12.4的时候,使用shake.js这个封装的api还是有效果的,突然拿了一部IOS13+的手机测试了一下发现压根就没有触发shake.js里面封装的devicemotion事件,这个事件绑定的函数接收一个DeviceMotionEvent对象类型的参数描述发生的动作。

从iOS 12.2开始,苹果出于隐私问题决定,默认情况下,浏览器对设备运动和方向事件的访问权限处于关闭状态。现在,也许他们意识到这可能是一个错误,因此在iOS 13中,他们更改了权限请求行为,类似于请求相机权限的方式。

因此,在IOS13+的移动端中,需要在DeviceMotionEvent上调用requestPermission这个方法,该方法请求用户当前来源的权限以显示通知,然后根据用户的不同选择,触发不同的状态【granted(被授予),denied(被拒绝) 或者default(默认)】,并返回一个Promise对象。PS:requestPermission只能在用户手势(例如单击)上调用。相关代码为:

 function onClick() {
    // feature detect
    if (typeof DeviceMotionEvent.requestPermission === 'function') {
      DeviceMotionEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === 'granted') {
            window.addEventListener('devicemotion', () => {});
          }
        })
        .catch(console.error);
    } else {
      // handle regular non iOS 13+ devices
    }
  }

触发之后,效果为

移动端关于手机摇一摇(IOS13+一些问题)_第1张图片

点击允许的,当然可以使用devicemotion了。

PS:“动作与方向”提示窗口弹出后,无论您选择了“允许”或“取消”,那下一次访问将不会再弹出询问,您必须在设置栏目将safari的临时缓存数据清空,这样就可以重新弹出“动作与方向”询问框。

参考链接:

1.https://dev.to/li/how-to-requestpermission-for-devicemotion-and-deviceorientation-events-in-ios-13-46g2

2.https://victu360.com/archives/12202

你可能感兴趣的:(web前端)