如何使用 JavaScript 在瀏覽器中可靠地偵測 Android 手機旋轉？

使用JavaScript 偵測瀏覽器中的Android 手機旋轉

雖然可以使用JavaScript 偵測iPhone 上Safari 中的螢幕方向和變化，但在Android 手機上也可行嗎？

Android 上的響應式旋轉偵測

在Android 手機中，由於裝置和瀏覽器之間的行為不同，使用JavaScript 進行旋轉偵測是一件複雜的事情。僅依賴調整大小或方向更改事件是不可靠的。

可靠的方法

建議的方法包括監視調整大小和方向更改事件，透過輪詢間隔持續檢查方向更新.

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);</code>

設備特定行為

設備對方向變化的反應差異很大。以下是透過測試四種不同設備所獲得的事件排序和值的表格：

Device	Events Fired	orientation	innerWidth	screen.width
iPad 2 (to landscape)	resize, orientationchange	0	1024	768
iPad 2 (to portrait)	resize, orientationchange	90	768	768
iPhone 4 (to landscape)	resize, orientationchange	0	480	320
iPhone 4 (to portrait)	resize, orientationchange	90	320	320
Droid phone (to landscape)	orientationchange, resize	90	320	320
Droid phone (to portrait)	resize, orientationchange, resize	0	569	569
Samsung Galaxy Tablet (to landscape)	orientationchange, orientationchange, resize	0	400	400
Samsung Galaxy Tablet (to portrait)	orientationchange, orientationchange, orientationchange, resize	90	683	683

結論

雖然iOS 和Android 裝置之間方向變更的事件處理可能有所不同，但採用建議的方法可確保使用JavaScript 在Android 手機上進行可靠的方向檢測。

以上是如何使用 JavaScript 在瀏覽器中可靠地偵測 Android 手機旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！