ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用して Android 上のブラウザでデバイスの回転を確実に検出するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-10-26 11:02:29
オリジナル
477 人が閲覧しました

How can I Reliably Detect Device Rotation in a Browser on Android with JavaScript?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート