使用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中文網其他相關文章!