JavaScript を使用した Android 上のブラウザでのデバイスの回転の検出

回転の検出における互換性の課題

JavaScript を使用したデバイスの回転の検出Android スマートフォンでは、明確なアプローチを持つ iPhone に比べて、ブラウザーがより困難になる可能性があります。 Android デバイス間での動作は一貫性がなく、イベントの順序や頻度が異なり、screen.width や window.orientation.

回転検出の信頼性の高いアプローチ

これらの不一致に対処するには、安全対策として、size イベントと OrientationChange イベントの両方をリッスンし、ポーリングを実装することをお勧めします。このアプローチにより、最終的には有効な向きの値を確実に受け取ることができます。 var checkOrientation = function(){ if(window.orientation !==PreviousOrientation){ 前の方向 = window.orientation; // 必要に応じて方向の変更を処理します } }; window.addEventListener("サイズ変更", checkOrientation, false); window.addEventListener("方向変更", checkOrientation, false); // (オプション) Android での向きの変更をポーリングします (180 度回転) setInterval(checkOrientation, 2000);

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change as needed
    }
};

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

// (Optional) Poll for orientation changes on Android (180 degree turns)
setInterval(checkOrientation, 2000);

イベントのシーケンスと値の変更はデバイスによって異なります。以下は、さまざまなデバイスの結果をまとめた表です:

このアプローチはデバイスの回転を検出する信頼性の高い方法を提供しますが、次の点に注意することが重要です。この文脈における JavaScript の制限に留意してください。たとえば、screen.width などの特定の値は、常に期待どおりに変更されるとは限りません。また、iOS デバイス間で動作が一貫していないため、screen.width のみに依存しないことをお勧めします。