使用浏览器传感器工具测试手机陀螺仪效果

1 先附上效果图

上面界面的打开过程是，任意网页，按f12，然后选择跟多工具，里面的传感器选项即可

2 原理

web端提供了deviceorientation事件，支持检测设备方向变化；那么可以根据设备检测做出很多有趣的东西，目前谷歌和火狐浏览器已经很好支持了;

测试浏览器是否支持用window.DeviceOrientationEvent属性;代码很简单如下

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>h5陀螺仪原理</title>
</head>
<body>alpha:<span id="alpha"></span><br/>beta:<span id="beta"></span><br/>gamma:<span id="gamma"></span><br/></body>
<script>if (window.DeviceOrientationEvent) {window.addEventListener('deviceorientation', function (event) {  var a = document.getElementById('alpha'),b = document.getElementById('beta'),g = document.getElementById('gamma'),alpha = event.alpha,beta = event.beta,gamma = event.gamma;a.innerHTML = Math.round(alpha); // 水平旋转b.innerHTML = Math.round(beta);// 前后反转g.innerHTML = Math.round(gamma);// 左右翻转}, false);} else {document.querySelector('body').innerHTML = '你的浏览器不支持陀螺仪';}
</script>
</html>

然后测试效果看一下，也可以用手机端打开浏览器，旋转手机测试；这里就用浏览器的传感器测试工具测试

使用浏览器传感器工具测试手机陀螺仪效果相关推荐

使用浏览器开发工具测试网站可访问性的七种方法
前言有很多方法可以测试你的网站是否具有可访问性.服务.软件包,甚至是人工测试公司.他们都有自己的位置,通常最好是对真实的人进行测试.然而,对于一个快速的初步测试,你无需安装任何东西或支付服务费用.浏 ...
基于图像识别测试手机浏览器打开网页首屏时间的方法
本文涉及性能测试技术,特别是涉及一种基于图像识别的测试手机网页首屏时间的方法,它可以应用在手机浏览器页面加载响应时间的的自动化测试或性能检测中.同时可以应用到其他android的apk的响应时间的测试 ...
Python selenium —— 用chrome的Mobile emulation模拟手机浏览器测试手机网页
很多人发现chrome有项功能,就是在开发者工具里能够模拟手机打开网页,便想能否用selenium对此进行自动化测试.答案当然是yes! 今天博主便给大家分享下如何用chrome的MobileEmul ...
android 传感器ceshi,Android代码-传感器-测试手机支持那几种传感
Android代码----传感器-----测试手机支持那几种传感一个小小Demo检测手机支持那几种传感: 具体代码如下: [Java代码]DemoSensorActivity.java packag ...
Fiddler及浏览器开发者工具进行弱网测试
------·今天距2021年265天·------ 这是ITester软件测试小栈第110次推文在上一篇Fiddler系列文章:Fiddler跨域调试及Django跨域处理,主要介绍了跨域原理.F ...
python 浏览器模拟手机_Python selenium —— 用chrome的Mobile emulation模拟手机浏览器测试手机网页...
很多人发现chrome有项功能,就是在开发者工具里能够模拟手机打开网页,便想能否用selenium对此进行自动化测试.答案当然是yes! chrome-emulation 今天博主便给大家分享下如何用 ...
selenium之用chrome的Mobile emulation模拟手机浏览器测试手机网页
很多人发现chrome有项功能,就是在开发者工具里能够模拟手机打开网页,便想能否用selenium对此进行自动化测试.答案当然是yes! 今天博主便给大家分享下如何用chrome的MobileEmul ...
浏览器内核兼容测试工具
浏览器测试工具有哪些浏览器安全性能内核兼容测试工具推荐好用的浏览测试工具有哪些?作为一个爱折腾的浏览迷,浏览器跑分.浏览器测试必不可少.今天就给大家整理一下与浏览器测试相关的一些工具或网站,方便各 ...
在线html 浏览器,web浏览器在线兼容性测试工具_检测html网页在不同浏览器上的兼容问题...
对于web前端开发者而言,为了确保html代码在不同浏览器上能正常工作,是一件很麻烦的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,下面就为大家推荐一下比较流行的web浏览器在线兼容性测 ...

使用浏览器传感器工具测试手机陀螺仪效果

使用浏览器传感器工具测试手机陀螺仪效果相关推荐

最新文章

热门文章