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

orientationchange事件

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

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

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

調整大小事件

有些設備不支持orientationchange事件，但可以觸發resize事件：

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

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

屏幕尺寸

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

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

當然，這些數據不能告訴你方向的變化，需要通過簡答的數學計算，你就知道現在的窗口狀態是更寬了還是更高了。

媒體查詢

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

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

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

匹配媒體

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

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

　　

　　

轉載于:https://www.cnblogs.com/kt520/p/5681608.html

總結

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

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