IOS系统中H5页面实现摇一摇功能

公司准备开年会了，年会活动用了一套别人的系统，根据测试，有些游戏的摇一摇功能在IOS上无法使用，为了修复该功能，踩了一些坑，特此记录如下：

1. 因为IOS系统的安全要求，项目必须是在https的域名下；

2. IOS系统13.3以后必须用户授权，才能使用重力与方向；

3. 用户授权时必须是手动触发完成，这点特别重要，比如点击一个按钮；

以下是代码实现，方便大家作参考：

<!DOCTYPE html>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="content-security-policy">
<html><head><meta charset="utf-8" /><title>IOS系统中H5页面实现摇一摇功能</title><style>button {width: 200px;height: 60px;font-size: 18px;text-align: center;position: fixed;left:50%;top:50%;transform: translate(-50%,-50%);}</style></head><body><button>点击授权</button></body><script>// 定义一个摇动阈值var shakeThreshold = 500;// 三个方向上次的值var lastX, lastY, lastZ;// 上一次摇动的时间var lastTime = 0;// 用户摇一摇的功能function shakeFunction() {var system = navigator.userAgent.toLowerCase();if (system.indexOf("like mac os x") > 0) {var reg = /os [\d._]*/gi;var info = system.match(reg);var version = (info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");var list = version.split(".");// 对IOS 13.3以后的版本处理if (list[0] > 12 && list[1] > 2) { if (typeof (DeviceMotionEvent) !== 'undefined' && typeof (DeviceMotionEvent.requestPermission) === 'function') {window.DeviceOrientationEvent.requestPermission().then(state => {if (state === "granted") { // 监听传感器运动事件if (window.DeviceMotionEvent) {alert("授权成功")window.addEventListener('devicemotion', shakeFunctionHandler);} else {alert('手机不支持陀螺仪功能');}} else if (state === "denied") { alert("拒绝授权")} else if (state === "prompt") {alert("你对手机做了啥")}})} } else {// 监听传感器运动事件if (window.DeviceMotionEvent) {window.addEventListener('devicemotion', shakeFunctionHandler);} else {alert('手机不支持陀螺仪功能');}}}};// 运动传感器的处理function shakeFunctionHandler(e) {var currentTime = Date.now();// 每100毫秒判断一次位置if ((currentTime - lastTime) > 100) {// 获取重力加速度var acceleration = e.accelerationIncludingGravity;var x = acceleration.x;var y = acceleration.y;var z = acceleration.z;var differenceTime = currentTime - lastTime;var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / differenceTime * 10000;// 前后三个向的差值的绝对值和时间比率超过了预设的阈值if (speed > shakeThreshold) {alert('手机开始摇起来了');};lastX = x;lastY = y;lastZ = z;lastTime = currentTime;}}</script></html>

IOS系统中H5页面实现摇一摇功能相关推荐

ios系统微信H5页面背景音乐自动播放
思路:在页面中内嵌微信开发的代码块,可让ios手机自动播放背景音乐注意:代码引入了微信js接口,实际开发需配置jsjdk html代码 <!DOCTYPE html> <html ...
ios系统在h5页面下拉上拉会带动整个webview 出现空白
产生原因: 在 iOS 中,手指按住屏幕上下拖动,会触发 touchmove 事件.这个事件触发的对象是整个 webview 容器, 容器自然会被拖动,剩下的部分会成空白. 在 W3C 文档中说 to ...
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...
解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开
//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...
IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题在iOS系统中打开网页,input框输入时,输入框获取焦点的时候页面会放大,如果没有经过设置,页面放大之后就不会自动还原.使内容撑开浏览器,底部产生 ...
window使用chrome调试ios设备的H5页面（Safari和APP）
window使用chrome调试ios设备的H5页面(Safari和APP) 1:用管理员身份打开PowerShell,不同操作系统打开方式不太一样,win10的话在搜索栏搜索就能找到( 2:查看Po ...
vue单应用在ios系统中实现微信分享功能
表示是第一次使用vue做单应用显目,也是在逐渐的摸索中~更是各种踩坑,各种填坑,打算写博客么?是因为不想写笔记了,嗯嗯就是这么简单进入正题. 刚开始做微信分享的这个功能的时候,脑补了官方文档微信J ...
iOS系统中导航栏的转场解决方案与最佳实践
背景目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
在MacOS和iOS系统中使用OpenCV
在MacOS和iOS系统中使用OpenCV 前言 OpenCV 是一个开源的跨平台计算机视觉库,实现了图像处理和计算机视觉方面的很多通用算法. 最近试着在 MacOS 和 iOS 上使用 OpenCV ...

IOS系统中H5页面实现摇一摇功能

IOS系统中H5页面实现摇一摇功能相关推荐

最新文章

热门文章