目前苹果的 ios13.3.0 以上的系统（经过测试不是那么严谨有的相同的版本还有能用不能用的问题），对于deviceorientation 事件无法触发，需要权限才可以触发。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>
motion orientation access
</title>
</head>
<body>
<button onclick="testClick()">
deviceorientation
</button>
<script type="text/javascript">
// 判断是否是 ios 设备
function getIos() {
var u = window.navigator.userAgent;
return !! u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
}
function requestPermissionsIOS() {
requestDeviceMotionIOS();
requestDeviceOrientationIOS();
}
function requestDeviceMotionIOS() {
if (typeof(DeviceMotionEvent).requestPermission === 'function') {
(DeviceMotionEvent).requestPermission().then(permissionState =>{
if (permissionState === 'granted') {
window.addEventListener('devicemotion', () =>{
});
}
}).
catch((err) =>{
alert(JSON.stringify(err)) alert("用户未允许权限");
})
} else {
// handle regular non iOS 13+ devices
}
}
// requesting device orientation permission
function requestDeviceOrientationIOS() {
if (typeof(DeviceOrientationEvent).requestPermission === 'function') { (DeviceOrientationEvent).requestPermission().then(permissionState =>{
if (permissionState === 'granted') {
window.addEventListener('deviceorientation', () =>{
});
}
}).
catch((err) =>{
alert(JSON.stringify(err)) alert("用户未允许权限");
})
} else {
// handle regular non iOS 13+ devices
}
}
function testClick() {
requestPermissionsIOS();
}
</script>
</body>
</html>
重点说明：
- 需要https的链接。
- 需要人为手动点击button按钮触发弹出授权弹窗，或者body onclick事件触发。目前测试 touchstart 是不行的。
- 微信打开的链接点击了取消，需要杀死微信，重新进去，刷新页面就可以再次弹出授权弹窗。清除缓存测试是不行的。无法弹出授权弹窗。
- safari 每次取消了需要清楚缓存才可以弹出。
- 只需要授权一次就可以了。
网友评论