一、事件:devicemotion(检测手机晃动)
对象: -accelerationIncludingGravity加速度
对象的属性:
-x x方向速度
-y y方向加速度
-z z方向加速度
陀螺太过灵敏时,一般用Math.round();取其整数位。
陀螺仪的兼容性问题:在ios和Android中重力加速度值相反。需要手动解决其兼容性。
var u=navigator.userAgent;//获取userAgent,userAgent中含浏览器信息
var isAndroid=u.indexOf('Android')>-1||u.indexOf('Adr')>-1;//判断是否是android
var isIOS=!!u.match(/\(i[^;]+;(u;)?CPU.+Mac OS X/);判断是否是ios
也可以封装一个函数出来:
function getAdr(){//android:true;ios:false;
var u=navigator.userAgent;//获取userAgent,userAgent中含浏览器信息
return u.indexOf('Android')>-1||u.indexOf('Adr')>-1;//判断是否是android
}
二、事件:orientationchange(横竖屏切换)
每次横竖屏切换都会触发该事件。
获取当前屏幕状态(横屏或者竖屏),需要检测以下对象。
window下的对象:
window.orientation
//横屏状态:90 -90
//竖屏状态:0 -180
用途:横竖屏检测
回顾:采用媒询也可以实现横竖屏检测,其原理是利用屏幕可视区宽高比检测横竖屏状态。但是该情况存在bug,输入法键盘窗口弹出影响了可视区宽高比可能会引起横竖屏切换。
问题一:怎样保证仅竖屏显示?
解决方法:因为在js中无法禁止横竖屏切换,因此可以在发生横竖屏切换时,用js控制同方向旋转屏幕内容。注意导航栏也要旋转。
二、事件:deviceorientation(检测手机倾斜旋转)
事件对象的属性:
-alpha(rotateZ)
-beta(rotateX)
-gamma(rotateY)