偵測瀏覽器中的螢幕方向
在 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中文網其他相關文章！
