移动端关于手机摇一摇（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 detectif (typeof DeviceMotionEvent.requestPermission === 'function') {DeviceMotionEvent.requestPermission().then(permissionState => {if (permissionState === 'granted') {window.addEventListener('devicemotion', () => {});}}).catch(console.error);} else {// handle regular non iOS 13+ devices}}

触发之后，效果为

点击允许的，当然可以使用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

移动端关于手机摇一摇（IOS13+一些问题）相关推荐

摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:if (win ...
苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖，html5devicemotion...
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion 摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的 ...
Html5手机微信摇一摇
<?php /*** Created by JetBrains PhpStorm.* User: 张华* Date: 16-3-4* Time: 上午11:29* To change this ...
html检测手机是否摇动,HTML5摇一摇（上）—如何判断设备摇动
刚刚过去的一道学数里屏.中近,期据面蔽最,近,期据面年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签&qu ...
手机摇一摇效果-html5
1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (wi ...
隐藏与显现_手机键盘摇一摇，隐藏功能立马显现，太棒了
手机是我们每天都要用的,但如果我们把手机键盘给它摇一摇,它会有什么什么的作用呢?一起来看看吧! 第一个就是我们平时打字的时候,我们会打很多的字发给对方,如果突然间后悔了那么多的字,如果我们按删除键的话 ...
Android手机摇一摇的实现SensorEventListener
Android手机摇一摇的实现SensorEventListener 看实例 package com.example.shakeactivity;import android.content.Cont ...
Android之手机摇一摇震动刷新（支持ListView、GridView、WebView）并生成我的二维码
手机摇一摇震动刷新第一步:看摇一摇震动刷新的前后的效果图 1.摇一摇震动刷新前的效果图如下(图片太大了,分2次录屏的,如果看着不爽请猛戳我的github上面的演示) 2.摇一摇震动刷新之后的效果图如 ...

移动端关于手机摇一摇（IOS13+一些问题）

移动端关于手机摇一摇（IOS13+一些问题）相关推荐

最新文章

热门文章