ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を使用してブラウザで Android スマートフォンの回転を確実に検出する方法

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

Barbara Streisand
Barbara Streisandオリジナル
2024-10-30 15:18:59852ブラウズ

How to Reliably Detect Android Phone Rotation in Browsers Using JavaScript?

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。