プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
jQuery、スマホを傾けたとき(画面の幅が変更されたとき)に何か処理を行う
結論から書くと

var timer = false;
var w = 0;

//ロード時
$(window).load(function() {
    //画面表示時の幅を変数に保持
    w = $(window).width();
});

//リサイズ時
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        //幅が変わっているかチェック
        if($(window).width() != w){
            // 幅変更後に行う処理

            //幅再設定
            w = $(window).width();
        }
    }, 200);
});

とかやればOKでした。

やっていることは単純に、画面表示時点の幅を変数に取っておいて、
リサイズされたら幅が変更されているかをチェックして
処理を実行するか判断しているだけです。

処理の流れとしては

1.画面表示時の幅を変数「w」に保持
2.リサイズ後の幅を「1.」で保持した幅と比べて違ったら何か処理
3.「2.」で何か処理をしたら、変数「w」にリサイズ後の幅を代入

ですね。

ちなみに、手元にiPhoneしかなかったので、
Androidでは確認していません。
多分Androidでも大丈夫だと思いますが、
もし動かなかったらコッソリ教えてもらえると助かります(-。-)ぼそっ

それでは経緯その他を書いていきます。

jQuery、画面のサイズが変更されたときに何か処理を行う」の記事で書きましたが、
スマホを傾けたときに画面を再描画したくて、
画面のリサイズ後に画面を再表示する処理を書いたのですよ。
実際のコードは、こんな感じですφ(--)

var timer = false;
    $(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        alert("再描画します");
        location.reload();
    }, 200);
});

そうしたら、スマホの場合、たまに複数回実行されてしまってですね。

画面リサイズ
 ↓
「再描画します」のメッセージ表示
 ↓
画面再表示
 ↓
「再描画します」のメッセージ表示
 ↓
画面再表示

みたいになってしまうことがあったのです。

しかも、常になるわけでなくて、最初の一回だけ(-A-)
具体的には

1.画面表示

2.画面リサイズ(スマホを横にする)

3.「再描画します」のメッセージ表示
  ↓
 画面再表示
  ↓
 「再描画します」のメッセージ表示
  ↓
 画面再表示
 ※画面が2回再表示される

4.画面リサイズ(スマホを縦にする)

5.「再描画します」のメッセージ表示
  ↓
 画面再表示
 ※画面が1回だけ再表示される(正常な動作)

な動きをします。
Androidは手元に無かったので確認していませんが、
少なくともiPhoneさんでは、そのような動きになりました(-A-)

なんでこんなことになるのじゃ(--?

あれやこれやと調べたところ、

アドレスバーとかの表示が消えたときにresizeイベントが発生することがあるよ

という意見を見つけました。

なるほど!

つまり、表示領域の高さが変わるからresizeイベントが発生するってことか!

……と納得しかけたのですが、OSの種類やブラウザのバージョンによっても
挙動が違ったりするみたいですね(==;

う~ん(-公-;

傾けるってことは、横幅が変わるよね!
それじゃあ、画面リサイズ時じゃなくて、横幅が変わったときだけ処理すればいーじゃん!

ということで、こんなコードに書き換えφ(--)

var timer = false;
var w = 0;

//ロード時
$(window).load(function() {
    w = $(window).width();
});


//リサイズ時
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        if($(window).width() != w){
            // 幅変更後に行う処理
            alert("再描画します");
            location.reload();

            //幅再設定
            w = $(window).width();
        }

    }, 200);
});

画面表示時の幅を保持しておいて、リサイズ時に幅が変わったかチェック、
幅が変わっていたら画面を再表示します。

今回は画面を再表示してしまうので

//幅再設定
w = $(window).width();

の部分は無意味ですが、他の処理をやる人向けに書いておきます。
スマホを傾けて、傾けたときにやりたい処理をやったら、
次は処理をやった後の(傾けた後の)幅が基準になりますからね。
変数「w」の値を再設定しておく必要があるのです。

まぁ、そんなんやったら上手く行きました。

画面の表示時点から横幅が変わったときだけ特定の処理が実行される、
スマホの場合は傾けたときのみ処理が実行されるようになりましたよ。

それ以外は、スクロールしようとアドレスバーが非表示になろうと
処理は実行されませんヾ(´∀`)ノ……多分。

上でも書きましたが、Androidでは動作確認していなくてですね(^^ゞ
iPhoneでは大丈夫でしたし、頭で考える限りは大丈夫だと思うのですが、
万が一動かなかったら教えてもらえると嬉しいですm(__)m

取りあえず、そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト 

  関連記事