移动端设备方向deviceorientation事件

时间：6年前阅读：4606

deviceorientation事件用来监听设备的方向

　　设备在三维空间中是靠x、y和z轴来定位的。当设备静止放在水平表面上时，这三个值都是0

　　x轴方向是从左往右，y轴方向是从下往上，z轴方向是从后往前

　　触发deviceorientation事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息，事件对象包含以下5个属性

alpha:在围绕z轴旋转时（即左右旋转时),y轴的度数差；是一个介于0到360之间的浮点数

beta:在围绕x轴旋转时（即前后旋转时）,z轴的度数差；是一个介于-180到180之间的浮点数

gamma:在围绕y轴旋转时（即扭转设备时)，z轴的度数差；是一个介于-90到90之间的浮点数

absolute:布尔值，表示设备是否返回—个绝对值

compassCalibrated:布尔值，表示设备的指南针是否校准过

　　手机放置在水平桌面上，android的alpha、beta、gamma值为90、0、0；IOS的alpha、beta、gamma值为0、0、0

　　测试代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
#tt{
  width: 100px;
  line-height: 100px;
  height: 100px;
  background: pink;
  margin: 30px auto 0;
  text-align: center;
}  
		</style>
	</head>
	<body>
		<div id="tt"></div>
	</body>
	<script type="text/javascript">
		let oBox = document.getElementById('box');
window.addEventListener('deviceorientation',(e)=>{
  oBox.innerHTML = Math.round(e.beta)
  oBox.style.transform = `rotate(${e.beta}deg)`
})
	</script>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

移动端设备方向deviceorientation事件

网友评论