JavaScript 可以在瀏覽器中可靠地偵測 Android 手機旋轉嗎？

JavaScript 可以偵測瀏覽器中的 Android 裝置旋轉嗎？

偵測瀏覽器中的螢幕方向

在 iPhone 上的 Safari 中，螢幕可以透過 onorientationchange 事件偵測方向變化。然而，問題出現了：Android 手機能否提供類似的方向偵測功能？

JavaScript 和 Android 手機旋轉

不同 Android 裝置的方向偵測行為差異很大。 resize 和orientationChange 事件可能以不同的順序觸發且頻率不一致。此外，像 screen.width 和 window.orientation 這樣的值並不總是按預期更新。

偵測旋轉的可靠方法

為了確保可靠性，建議訂閱resize 和orientationChange 事件。此外，還可以實現輪詢機制來捕獲錯過的事件：

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, take appropriate actions
    }
};

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

// (optional) Android may fail to fire events on 180 degree rotations
setInterval(checkOrientation, 2000);</code>

特定於設備的結果

在各種設備上進行的測試顯示出不一致的情況。雖然 iOS 裝置表現出一致的行為，但 Android 裝置卻表現出變化。下表總結了觀察到的結果：

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

因此，雖然可以在瀏覽器中使用JavaScript 檢測Android 手機旋轉，但不同設備的行為有所不同，需要採用穩健的方法來確保可靠性。

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