【jQuery】レスポンシブサイトで悩まされるスマホ対応の注意点

単純にレスポンシブサイトを作る際、cssのみで振り分けるだけならブラウザが勝手に処理してくれますが、javascriptで何らかの処理を行っていると、案外面倒なことになるなということで、ちょっとメモ書きです。

 
一般的な横幅で内容が変わるサイトの場合です。

$(function(){
    var w = $(window).width();
    Responsive();

    function Responsive () {
        //レスポンシブ処理
    }
});

一番最初にこの記述があると思います。
 
もちろん、これだけだとブラウザのリサイズに対応できないので、リサイズ時の記述も併せて書きます。

$(function(){
    var w = $(window).width();
    var timer = false;

    Responsive();

    $(window).resize(function() {
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            Responsive();
        }, 200);
    });

    function Responsive () {
        //レスポンシブ処理
    }
});

$(window).resize(function(){～
だけだとブラウザのリサイズ中ずっと処理が発生してしまうので、setTimeoutを使ってリサイズ終了時に処理をするようにしています。

 
このソースはこちらからいただきました。
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle

 
続いて、スマホの縦横回転にも対応させましょう。

$(function(){
    var w = $(window).width();
    var timer = false;

    Responsive();

    $(window).on("orientationchange resize",function() {
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            Responsive();
        }, 200);
    });

    function Responsive () {
        //レスポンシブ処理
    }
});

$(window).resize(function(){～
のところを、
$(window).on(“orientationchange resize”,function() {～
と書いています。
 
これでブラウザのリサイズと、スマホの回転の処理を同時に書いていることになります。
つまり、
$(window).orientationchange(function(){～
と書くと、回転時のみの処理を行うこともできます。

 
これでOK…と思いきや、今時の親切なスマホさんは、スクロールするとアドレスバーを縮めたりして勝手にresizeを発生させてくれます。

 
というわけで、縦スクロールで処理が発生しないようにしましょう。

$(function(){
    var w = $(window).width();
    var w_resize;
    var timer = false;

    Responsive();

    $(window).on("orientationchange resize",function() {
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            w_resize = $(window).width();
            if (w != w_resize){
                Responsive();
                w = $(window).width();
            }
        }, 200);
    });

    function Responsive () {
        //レスポンシブ処理
    }
});

これで横幅が変ったときのみ処理を行うということになりました。

 
縦サイズが変わった時に表示が変わるのは特殊なケースだと思いますので、とりあえずはこちらでなんとかなりそうです。