JavaScript を使用して Android 上のブラウザでデバイスの回転を確実に検出するにはどうすればよいですか?

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

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

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

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

これらの不一致に対処するには、安全対策として、size イベントと OrientationChange イベントの両方をリッスンし、ポーリングを実装することをお勧めします。このアプローチにより、最終的には有効な方向値を確実に受け取ることができます。

<code class="js">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);</code>

イベント シーケンスと値の変更

イベントのシーケンスと値の変更は、イベントごとに異なります。デバイス。さまざまなデバイスの結果をまとめた表を次に示します。

Device	Events Fired (to Landscape)	orientation	innerWidth	screen.width
iPad 2	resize, orientationchange	90	1024	768
iPhone 4	resize, orientationchange	90	480	320
Droid phone	orientationchange, resize	90	320	569
Samsung Galaxy Tablet	orientationchange, orientationchange, orientationchange, resize, orientationchange	90, 90, 90	400	683

追加の考慮事項

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

以上がJavaScript を使用して Android 上のブラウザでデバイスの回転を確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。