除非你的應(yīng)用程序限定了只在移動設(shè)備直立狀態(tài)或水平狀態(tài)下使用，一般情況下，你需要調(diào)整一些設(shè)定。即便你設(shè)計的布局流暢時尚，你可能需要改變某些編程代碼。通常有以下一些小的策略用于檢測移動設(shè)備方向的改變。

orientationchange事件

你等待一個移動API，一個簡單的窗口orientationchange事件：

// 監(jiān)聽方向的改變 window.addEventListener("orientationchange", function() { // 宣布新方向的數(shù)值 alert(window.orientation); }, false);

發(fā)生改變的時候，?window.orientation屬性就改變。值為0表示直立, 90表示設(shè)備水平旋轉(zhuǎn)到左邊, -90表示設(shè)備水平旋轉(zhuǎn)到右邊。

調(diào)整大小事件

有些設(shè)備不支持orientationchange事件，但可以觸發(fā)resize事件：

// 監(jiān)聽調(diào)整大小的改變 window.addEventListener("resize", function() { // 得到屏幕尺寸 (內(nèi)部/外部寬度，內(nèi)部/外部高度) }, false);

跟orientationchange事件比起來較不明顯，但也是很好用的。

屏幕尺寸

有一些屬性可以從window對象恢復(fù)，以獲取屏幕尺寸及我認為的“虛擬”屏幕大小：

• 外部寬度，外部高度：真正不動的象素（而不是320×356iPhone直立像素）
• 內(nèi)部寬度，內(nèi)部高度：虛擬不動的象素（而不是320×356iPhone直立像素）

當然，這些數(shù)據(jù)不能告訴你方向的變化，需要通過簡答的數(shù)學(xué)計算，你就知道現(xiàn)在的窗口狀態(tài)是更寬了還是更高了。

媒體查詢

你還可以通過CSS媒體查詢判定方向：

/* portrait */ @media screen and (orientation:portrait) { /* portrait-specific styles */ } /* landscape */ @media screen and (orientation:landscape) { /* landscape-specific styles */ }

更聰明的做法是，用JavaScript編寫一個循環(huán)的”watcher”?，用以檢查一個塊的背景顏色，并觸發(fā)你自己的方向改變。

匹配媒體

本地window.matchMedia方法允許實時媒體查詢。我們可以利用以上媒體查詢找到我們是處于直立或水平視角：

// 尋找匹配 var mql = window.matchMedia("(orientation: portrait)");// 如果有匹配，則我們處于垂直視角 if(mql.matches) { // 直立方向 } else { //水平方向 }// 添加一個媒體查詢改變監(jiān)聽者 mql.addListener(function(m) { if(m.matches) { // 改變到直立方向 } else { // 改變到水平方向 } });

　　

　　

轉(zhuǎn)載于:https://www.cnblogs.com/kt520/p/5681608.html

總結(jié)

以上是生活随笔為你收集整理的移动端中如何检测设备方向的变化？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。