JavaScript を使用してブラウザで Android スマートフォンの回転を確実に検出するにはどうすればよいですか?

JavaScript を使用したブラウザでの Android スマートフォンの回転の検出

JavaScript を使用して iPhone 上の Safari で画面の向きと変化を検出することは可能ですが、Android スマートフォンでも実行可能ですか?

Android での応答回転検出

Android スマートフォンでは、デバイスやブラウザーごとに動作が異なるため、JavaScript を使用した回転検出は複雑です。サイズ変更イベントまたは方向変更イベントのみに依存することは信頼できません。

信頼できるアプローチ

推奨されるアプローチには、サイズ変更イベントと方向変更イベントの両方を監視し、ポーリング間隔を通じて方向の更新を一貫してチェックすることが含まれます。 .

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

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

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);</code>

デバイス固有の動作

方向の変化に対するデバイスの応答は大きく異なります。以下は、イベントのシーケンスと 4 つの異なるデバイスのテストから得られた値の表です:

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

結論

方向変更のイベント処理は iOS デバイスと Android デバイスで異なる場合がありますが、推奨されるアプローチを採用することで、JavaScript を使用して Android スマートフォンで確実に方向を検出できます。

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