JavaScript はブラウザーでの Android スマートフォンの回転を検出できますか?

ブラウザでの Android スマートフォンの回転の Javascript ベースの検出

Apple が開発した Safari ブラウザでは、orientationChange イベントを観察してウィンドウを評価することで、画面の向きの変化を監視できます。 .方向。しかし、そのような機能は Android デバイス上で動作するブラウザに実装できますか?

これに対する反応は微妙です。標準 Web ページで Javascript を実行すると、Android デバイスの画面回転を実際に検出できます。ただし、動作はデバイスやブラウザによって異なります。

課題と推奨されるアプローチ

主な課題は、Android デバイス間でイベントの起動動作が一貫していないことにあります。サイズ変更イベントと方向変更イベントは、さまざまな頻度で非同期に起動される場合があります。この複雑さに加えて、screen.width や window.orientation などの値が常に予測可能な結果を​​提供するとは限りません。したがって、iOS の回転中も screen.width が変更されないため、screen.width のみに依存することはお勧めできません。

最も信頼できるアプローチは、resize イベントと OrientationChange イベントの両方を同時にリッスンすることです。 setInterval 関数を使用した定期的なポーリングでこれを補うことで、信頼性が向上し、有効な向きの値が保証されます。

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Perform operations in response to orientation change
    }
};

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

// Android occasionally fails to trigger events for 180-degree rotations
setInterval(checkOrientation, 2000);</code>

デバイス固有の結果

全体で観察された動作の概要は次のとおりです。さまざまなテスト済みデバイス:

Device	Event Sequence	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, orientationchange	90	400	400
Samsung Galaxy Tablet (Portrait)	orientationchange, orientationchange, orientationchange, resize, orientationchange	0	683	683

以上がJavaScript はブラウザーでの Android スマートフォンの回転を検出できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。