Saba note

醜悪コード Ugly hacks ITものづくり

レスポンシブデザインのviewportをjQueryで

アクセス時のbody幅とWindowを動的に伸び縮みさせたときのbody幅を取得します。これ使うとレスポンシブ対応のWEBデザインに比較的柔軟に対応できます。
静的には$(window).width()でそのまま取得できるのですが、動的にはこのままではダメでsetTimeout()を使って幅を取得するってところが面倒なのです。

$(function(){

    // Window width default
    var egwidth = $(window).width();
        console.log(egwidth);
        if (egwidth <= 640) {
            alert("スマホで見ている。");
        } else if (egwidth > 640) {
            alert("PCで見ている。");
        }
    // Window width resize with pc
    var timer = false;
    $(window).resize(function() {

        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
        var egwidth = $(window).width();
        console.log(egwidth);
        if (egwidth <= 640) {
            alert("スマホで見ている。");
        } else if (egwidth > 640) {
            alert("PCで見ている。");
        }
        }, 200);
    });
});

Bootstrap3版

Bootstrapと一緒に使うことがあればこんな感じ。
本来定義値を共有できればよいというところなんですが、それがなかなか面倒くさい。なのでベタ打ちです。

var egwidth = $(window).width();
    console.log(egwidth);
    if (egwidth <= 767) {
        alert("スマホで見ている。");
    } else if (egwidth >= 768 && egwidth <= 991) {
        alert("タブレットで見ている。");
    } else if (egwidth >= 992 && egwidth <= 1119) {
        alert("小さいPCで見ている。");
    } else if (egwidth >= 1200) {
        alert("大きいPCで見ている。");
    }
// Window width resize with pc
var timer = false;

/* real time */
$(window).resize(function() {

    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
    var egwidth = $(window).width();
        if (egwidth <= 767) {
            alert("スマホで見ている。");
        } else if (egwidth >= 768 && egwidth <= 991) {
            alert("タブレットで見ている。");
        } else if (egwidth >= 992 && egwidth <= 1119) {
            alert("小さいPCで見ている。");
        } else if (egwidth >= 1200) {
            alert("大きいPCで見ている。");
        }
    }, 200);
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です