橫豎屏

　　window下的orientation屬性來表示移動端的橫豎屏狀態，chrome模擬器不支持該屬性，只能在真機上測試

window.orientation

　　按照上右下左的順序，該屬性的結果分別是0、90、180、-90

　　[注意]手機頭朝下的切換沒有實現

　　window下的orientationchange事件來監測移動端的橫豎屏狀態

　　[注意]橫豎屏切換也會觸發resize事件

window.addEventListener('orientationchange',()=>{alert(window.orientation)})

　　測試代碼如下

<style> #box{width: 100px;height: 100px;line-height: 100px;background: pink;margin: 30px auto 0;text-align: center; } </style> <div id="box"></div> <script> let oBox = document.getElementById('box')window.addEventListener('orientationchange',()=>{oBox.innerHTML = window.orientation}) </script>

設備方向

　　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

　　測試代碼如下

<style> #box{width: 100px;line-height: 100px;height: 100px;background: pink;margin: 30px auto 0;text-align: center; } </style> <div id="box"></div> <script> let oBox = document.getElementById('box'); window.addEventListener('deviceorientation',(e)=>{oBox.innerHTML = Math.round(e.beta)oBox.style.transform = `rotate(${e.beta}deg)` }) </script>

設備移動

　　window.devicemotion事件告訴開發人員設備什么時候移動，而不僅僅是設備方向如何改變

　　觸發devicemotion事件時，事件對象包含以下屬性

acceleration:一個包含X、y和z屬性的對象，在不考慮重力的情況下，告訴你在每個方向上的加速度 accelerationIncludingGravity： 一個包含x、y和z屬性的對象，在考慮z軸自然重力加速度的情況下，告訴你在每個方向上的加速度 interval:以毫秒表示的時間值，必須在另一個devicemotion事件觸發前傳入。這個值在每個事件中應該是一個常量 rotationRate: —個包含表示方向的alpha、beta和gamma屬性的對象

　　手機在不同方向下，android和IOS的acceleration和accelerationlncludingGravity這兩個屬性的x、y、z的值表示不同

　　1、放置在水平桌面上

android x:0 y:0 z:10 IOS x:0 y:0 z:-10

　　2、屏幕朝右

android x:-10 y:0 z:0 IOS x:10 y:0 z:0

　　3、屏幕正對人

android x:0 y:10 z:0 IOS x:0 y:-10 z:0

　　所以，android和IOS下重力加速度的取值相反

【元素跟隨手機移動】

　　下面利用accelerationlncludingGravity屬性實現元素跟隨手機移動的效果

　　測試代碼如下

<style> #box{width: 100px;height: 100px;background: pink;margin: 30px auto 0;text-align: center; } </style> <div id="box"></div> <script> let oBox = document.getElementById('box'); let lastX=0,lastY=0,lastZ=0; window.addEventListener('devicemotion',(e)=>{requestAnimationFrame(()=>{let {x,y,z} = e.accelerationIncludingGravityx = 6*xy = 6*yz = 6*zoBox.style.transform = `translate3d(${x+lastX}px,${y+lastY}px,${z+lastZ}px)`lastX = xlastY = ylastZ = z }) }) </script>

【搖一搖】

　　搖一搖的原理非常簡單，檢測到手機的重力加速忽然有比較大的變化幅度即可。搖一搖時，元素顏色發生變化

　　測試代碼如下

<style> #box{width: 100px;height: 100px;background: pink;margin: 30px auto 0;text-align: center;transition: 1s; } </style> <div id="box"></div> <script> let oBox = document.getElementById('box'); let colorArr = ['orange','lightblue','lightgreen','pink','lightyellow'] let lastX,lastY,lastZ let index = 0 window.addEventListener('devicemotion',(e)=>{requestAnimationFrame(()=>{let {x,y,z} = e.accelerationIncludingGravitylet nowRange = Math.abs(lastX -x) + Math.abs(lastY - y) + Math.abs(lastZ - z) if(nowRange > 80){index = (index+1)%colorArr.lengthoBox.style.background = colorArr[index]}lastX = x lastY = ylastZ = z }) }) </script>

?

轉載于:https://www.cnblogs.com/lst619247/p/8515314.html

總結

以上是生活随笔為你收集整理的移动端中的陀螺仪的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。