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 サイトの他の関連記事を参照してください。