使用JavaScript 偵測Android 瀏覽器中的裝置旋轉

偵測旋轉的相容性挑戰

使用JavaScript 偵測裝置旋轉與具有明確定義方法的iPhone 相比，Android 手機上的瀏覽器可能更具挑戰性。 Android 裝置上的行為可能不一致，事件的順序和頻率以及 screen.width 和 window.orientation 等值的變化。

旋轉檢測的可靠方法

為了解決這些不一致問題，建議監聽 resize 和orientationChange 事件並實施輪詢作為安全措施。這種方法可確保您最終會收到有效的方向值。

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

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

// (Optional) Poll for orientation changes on Android (180 degree turns)
setInterval(checkOrientation, 2000);

事件序列和值變更

事件序列和值變更因裝置而異。以下表格總結了各種設備的結果：

orientationchange、orientationchange、orientationchange、調整大小、orientationchange90、90、90

400

683

其他注意事項

雖然此方法提供了檢測設備旋轉的可靠方法，但重要的是要保持請記住JavaScript 在這方面的限制。例如，某些值（例如 screen.width）可能不會總是按預期更改。也建議避免僅依賴 screen.width，因為它在 iOS 裝置上的行為不一致。