React web

【JavaScript】スマホ/タブレット用web開発で画面の向きを制御する方法

2022年4月7日

iPhoneやiPad向けのweb開発のシーンで、デバイスの向きによって挙動を制御しなければならない状況などに役立つと思います。

回転イベントは「"orientationchange"」

orientationとは、向きという意味ですね。そのままです。

具体的にはこんな感じです。

window.addEventListener("orientationchange", function() {
	alert ("画面が回転しました" );
});

これで、画面が回転した際に「画面が回転しました」というアラートがでることになります。

実際に使うにはこんな感じ

実際に、画面の向きを制御するとなると、このような感じになるのかなと想定してみました。

window.addEventListener("orientationchange", function() {
　　　　let angle = this.window.orientation;
        if( angle === 90 || angle === -90){
            // ①なんらかの処理
　　　　}
});

this.window.orientationで、画面の向きを取得することができます。

上記の例では、画面の向きが90度もしくは－90度の時にif文の中の処理を行っています。

ここで、行いたい関数を実行などすれば、制御は完了だと思います。

Reactの場合

Reactの場合も同様で、上記のコード内の①の部分で関数を実行・もしくはstateを変更するなどが考えられます。

ウィンドウの大きさが変更されたときにも同様にイベントを発生させる

上記のコードは、画面が回転した時に限定したものでしたが、実際には画面のサイズが変更されたときも同様の処理を通してあげるほうが実践的な場合もあります。

resize も加える

上記の2つの例に加えるとしたら、こんな感じです。

window.addEventListener("orientationchange resize", function() {
	alert ("画面が回転しました" );
});
window.addEventListener("orientationchange resize", function() {
　　　　let angle = this.window.orientation;
        if( angle === 90 || angle === -90){
            // ①なんらかの処理
　　　　}
});

-React, web
-,