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

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

在iOS 瀏覽器中，開發者可以使用onorientationchange 事件並查詢window.orientation來檢測螢幕旋轉對於角度。 Android 智慧型手機上可以實現類似的功能嗎？

Android 上的瀏覽器行為

與 iOS 不同，Android 上螢幕旋轉事件的行為因裝置而異。 resize 和orientationChange 事件可能會以不同的順序和頻率觸發。此外，諸如 screen.width 和 window.orientation 之類的值可能會表現不一致。僅依賴 screen.width 是特別不可靠的，因為它在 iOS 中旋轉時不會改變。

可靠的方法

要解決這些不一致問題，建議聽resize 和orientationChange 事件，以及間歇性輪詢。這可以確保即使在事件不一致觸發的情況下也能捕捉有效的方向值。

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change
    }
};

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

// Polling as a safety catch for 180-degree rotations
setInterval(checkOrientation, 2000);

測試結果

在各種 Android 裝置上進行的測試顯示出顯著的差異：

Device	Events Fired	Orientation	InnerWidth	Screen.width
iPad 2 (Landscape)	Resize OrientationChange	90	1024	768
iPad 2 (Portrait)	Resize OrientationChange	0	768	768
iPhone 4 (Landscape)	Resize OrientationChange	90	480	320
iPhone 4 (Portrait)	Resize OrientationChange	0	320	320
Droid Phone (Landscape)	OrientationChange Resize	90	320	320
Droid Phone (Portrait)	OrientationChange Resize	0	569	569
Samsung Galaxy Tablet (Landscape)	OrientationChange OrientationChange OrientationChange Resize	90	400	400
Samsung Galaxy Tablet (Portrait)	OrientationChange OrientationChange OrientationChange Resize	0	683	683

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