JavaScript を使用してブラウザで Android スマートフォンの回転を確実に検出する方法

JavaScript を使用したブラウザでの Android スマートフォンの回転の検出

iOS ブラウザでは、開発者は onorientationchange イベントを使用し、window.orientation をクエリして画面の回転を検出できます。角度に関しては。 Android スマートフォンでも同様の機能を実現できますか?

Android でのブラウザの動作

iOS とは異なり、Android での画面回転イベントの動作はデバイスによって異なります。サイズ変更イベントと方向変更イベントは、異なる順序と頻度で発生する場合があります。さらに、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 中国語 Web サイトの他の関連記事を参照してください。